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);
});

以下是工作演示：jsfiddle.net

Answer 1

在第三行中，您为scrollTop .scrollBox设置了新值，这就是每次用户滚动元素时滚动条闪烁的原因。这是更正版本：

$(".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 {
	position:fixed;
	width: 79.5%;
	height: 8px;
    top:36px;
	z-index: 100;
    margin-left: -0.08%;
    margin-top: 5.6%;
	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>

Answer 2

我有一个类似的问题，而jQuery是正确的，但仍然引起令人讨厌的闪烁。经过几次尝试，我将其范围缩小到以下事实：文本框中有一个空行（我一直滚动到文本框的底部，然后更新下面的进度条）。空行导致滚动计算出错。一旦删除了空行，则一切正常，进度条不再闪烁……所以这个故事的寓意是：当心文本框中的空行（即只有CRLF的行）...最好删除他们。

jQuery：当scrollHeight用于获取高度时，滚动期间进度条会闪烁

2 个答案: