jQuery：scrollHeightを使用して高さを取得するスクロール中にプログレスバーがちらつく

Question

リスト項目が動的に追加されるスクロールボックスがあります。私はスクロールボックスの高さを追跡するために、その上にプログレスバーを配置しました。私はscrollHeightを使ってスクロールボックスの現在の高さを取得しています。

私がここで直面している問題は、スクロールボックスをスクロールするとプログレスバーがちらつくことです。また、ボックスがスクロールしないようにします。しかし、私はスクロールボックスの正しい高さを取得します。 scrollHeightから高さを取得する代わりに乱数を置き換えた場合、進行状況バーはスムーズな遷移を示します。

コードの問題点は何ですか？ありがとう！

HTMLコード：

<div class = "outer-box"> 
    <progress class = "progress_bar" id = "progressbar" value="0" max="100"></progress> 
    <div class="scrollBox"> 
     <div class = "scroll_text"> 
     <ul> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
      <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
     </ul> 
    </div> 
    </div> 
</div> 

のjQueryコード：

$(".scrollBox").scroll(function() { 
    var s = $(".scrollBox").scrollTop(), 
    d = $(".scrollBox").scrollTop($(".scrollBox"))[0].scrollHeight, 
    c = $(".scrollBox").height(), 
    scrollPercent = (s/(d-c)) * 100; 
    var position = scrollPercent; 
    $("#progressbar").attr('value', position); 
}); 

ここで働いてデモです：あなたはscrollTopの新しい値を設定している3行目にjsfiddle.net

Answer 1

は、 0123のユーザーが要素をスクロールするたびにスクロールバーが点滅しているのはなぜですか？ここでは修正されたバージョン：

$(".scrollBox").scroll(function() { 
 
    var s = $(".scrollBox").scrollTop(), 
 
     d = $(".scrollBox")[0].scrollHeight, // Just get scrollHeight 
 
     c = $(".scrollBox").height(), 
 
     scrollPercent = (s/(d-c)) * 100; 
 
    var position = scrollPercent; 
 
    $("#progressbar").attr('value', position); 
 
});

.outer-box{ 
 
    margin-top: 11.6%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 76.3%; 
 
} 
 
.scrollBox { 
 
    margin-top: 0%; 
 
    position: fixed; 
 
    width: 76.3%; 
 
    height: 400px; 
 
    box-shadow: 0 0.5px 0.5px #ABABAB inset, 0 0 6px #ABABAB; 
 
    outline: 0 none ; 
 
    overflow: auto; 
 
    padding: 10px; 
 
    margin-bottom: 2%; 
 
    z-index: -10; 
 
} 
 
.scroll_text{ 
 
    margin: 3%; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
} 
 
.chat_item { 
 
    background: #EEEEEE; 
 
    margin-top: 1.5%; 
 
    margin-left: -2%; 
 
    margin-bottom: 1.5%; 
 
    padding: 3px; 
 
    border-radius: 30px; 
 
    max-width: 90%; 
 
    float: left; 
 
    /*box-shadow: 0 3.5px 0.5px #428bca inset, 0 0 0px grey;*/ 
 
} 
 
.chat_text{ 
 
    padding-left: 30px; 
 
    padding-top: 15px; 
 
    padding-right: 30px; 
 
} 
 
progress { 
 
\t position:fixed; 
 
\t width: 79.5%; 
 
\t height: 8px; 
 
    top:36px; 
 
\t z-index: 100; 
 
    margin-left: -0.08%; 
 
    margin-top: 5.6%; 
 
\t background-color: blue; 
 

 
} 
 

 
progress::-webkit-progress-bar-value {background:#54cfca} 
 
progress::-webkit-progress-value {background:#54cfca} 
 
progress::-moz-progress-bar {background:#54cfca}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "outer-box"> 
 
    <progress class = "progress_bar" id = "progressbar" value="0" max="100"></progress> 
 
    <div class="scrollBox"> 
 
    <div class = "scroll_text"> 
 
     <ul> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     <li class = "chat_item" id = "sample"> <p class = "chat_text"> Hey there ! I am blah blah blah..cool'</p></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>