upp

index.css

@@ -46,8 +46,16 @@ body {
   z-index: 10;
   right: 2px;
   top: 0;
-  height: 50px;
+  height: calc(100% - 50px);
   width: 4px;
+  pointer-events: none;
+}
+.gunDongDom .gunDongDomSon {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
   background-color: #ddc136;
   border-radius: 2px;
 }

index.html

@@ -19,6 +19,7 @@
 
   <!-- 右侧滚动条 -->
   <div class="gunDongDom">
+    <div class="gunDongDomSon"></div>
   </div>
 
 </body>

index.less

@@ -53,10 +53,18 @@ body {
   z-index: 10;
   right: 2px;
   top: 0;
-  height: 50px;
+  height: calc(100% - 50px);
   width: 4px;
-  background-color: #ddc136;
-  border-radius: 2px;
+  pointer-events: none;
+  .gunDongDomSon{
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #ddc136;
+    border-radius: 2px;
+  }
 }
 
 #container{

js/main.js

@@ -878,25 +878,13 @@ $(window).resize(function () {
 
 
           // 邵根 -滚动条
-          
-          // 滚动条本身的高度占多少百分比
-          let oldBai = (50 / window.innerHeight) * 100
-          
-          oldBai = Math.round(oldBai)
-          
           const nowImgNum = this.currentFrame + 1
 
           console.log('-当前滚动到的图片：',nowImgNum);
 
           let nowGunBai = (nowImgNum / imgCounts) * 100
 
-          // 最大滚动百分比
-          const maxBai =nowGunBai - oldBai
-
-          if(nowGunBai>maxBai) nowGunBai=maxBai
-          if(nowGunBai<=0) nowGunBai=0
-
-          document.querySelector('.gunDongDom').style.top = nowGunBai + '%'
+          document.querySelector('.gunDongDomSon').style.top = nowGunBai + '%'
 
         },