條形橫向進度條 自适應 橫向滾動進度條 實作代碼

額，說實話，我不太知道這個東西到底要怎麼起名字

未拖動

拖動到最後

删除兩個盒子

大概就是這樣一個效果，進度條可以根據盒子個數自适應

html代碼

css我就簡單放一下

.box{
    width: 100%;
    padding: 0.2rem;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.controlBoxWidth{
    width: 100%;
    overflow: hidden;
    height: 3rem;
}
.controlBoxScroll{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.scrollBox{
    width: 4rem;
    margin-left: 0.2rem;
    border: 1px solid red;
    height: 2rem;
    display: inline-block;
}
.scrollBox:nth-child(1){
    margin: 0;
}
.scrollPage{
    position: absolute;
    bottom: 0.8rem;
    width: 2rem;
    height: 0.1rem;
    background: gainsboro;
    border-radius: 40rem;
    overflow: hidden;
    left: 50%;
    margin-left: -1rem;
}
.nowPage{
    background: gold;
    height: 100%;
    width: 0;
    position: absolute;
}
           

html

<div class="box">
    <div class="controlBoxWidth">
        <div class="controlBoxScroll">
            <div class="scrollBox">1</div>
            <div class="scrollBox">2</div>
            <div class="scrollBox">3</div>
            <div class="scrollBox">4</div>
        </div>
    </div>
    <div class="scrollPage">
        <div class="nowPage"></div>
    </div>
</div>
           

JS代碼實作以及注釋

window.onload = function(){
     //給進度條一個寬度 根據滾動元素個數決定 百分比
     var nowPageWidth = 100 / document.querySelector('.controlBoxScroll').children.length
     document.querySelector('.nowPage').style.width = nowPageWidth + "%"
     //擷取進度條可滾動區域
     var scrollPageRealScrollArea = 100 - nowPageWidth
     //擷取可滾動距離
     var scrollWidthSize = document.querySelector('.controlBoxScroll').scrollWidth - document.querySelector('.controlBoxScroll').clientWidth
     //滾動事件
     document.querySelector('.controlBoxScroll').onscroll = function(e){
         //目前滾動盒子滾動的進度 百分比
         var scrollLeftSize = 100 - parseInt(((scrollWidthSize - this.scrollLeft) / scrollWidthSize)*100) 
         //滾動 左間距
         document.querySelector('.nowPage').style.left = scrollPageRealScrollArea*(scrollLeftSize/100) + "%"
     }
 }
           

這裡面比較繞，我起的名字也有可能比較長

這裡講解一下，

首先是整體思路 思路就是先計算可滾動距離

scrollWidth - clientWidth

不知道這個寬度分别代表的是什麼請移步https://www.cnblogs.com/yuteng/articles/1894578.html

這裡講解了比較全面的元素距離螢幕各種距離 寬度的代碼

然後我們用

取到的可滾動距離-scrollLeft

除以

可滾動距離

，就可以擷取到目前滾動進度的一個百分比進度

這裡我們做了一個跟據元素個數改變進度條長度的一個功能，這裡我們求了一下元素個數，然後根據元素個數的百分比設定這個進度條的長度，之後計算底下進度條的可滾動區域

然後根據上面滾動的百分比，給那個進度條定位left一個百分比的值即可，

這裡說一個小BUG，我把計算長度啥的都寫在了scroll 事件外面，是以說如果你的螢幕被拉伸了 這個進度條就會不準，你可以把這些計算放在window.onsize事件裡面

然後就沒了