javascript - div中的进度条

Question

我身上有个进度条。当我单击一个按钮时，会出现一个 div，我们可以在这个 div 上滚动，我希望它也有一个进度条。我把进度条的Jquery代码拿来了

MY JSFIDDLE

window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}

$('button').click(function() {
  if ($(this).hasClass("clicked")) {
    $(this).text("Open ↓");
  } else {
    $(this).text("Close ↑");
  }
  $('.blue-container').toggleClass('In');
  $('body').toggleClass('hideOverflow');
  $(this).toggleClass("clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>

<button> Open ↓</button>

<div class='blue-container'>
  <div class='blue'>
    <p>Hello ! Scroll down. I would like to have a progress bar for this div, like the body.</p>
  </div>
</div>

Answer 1

您需要创建与在窗口上设置的相同的进度 setter 函数，除了这个应该使用蓝色容器可滚动元素来测量滚动位置。

请记住，在您的蓝框关闭后，您不再需要从该框设置进度，因此您应该取消绑定(bind) setter 函数 ($scroller.off('scroll', progressSetter)) .下次打开蓝盒后会重新绑定(bind)。

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}

$('button').on('click', function() {
    var $container = $('.blue-container'),
        $scroller = $container.find('.blue'),
        $btn = $(this),
        $bar = $('#myBar'),
        progressSetter = function () {
          var height = $scroller[0].scrollHeight - $scroller.outerHeight();
          $bar.css({
            height: $scroller.scrollTop() / height * 100 + '%'
          });
        };

  if ($btn.hasClass("clicked")) {
    $btn.text("Open ↓");
    $scroller.off('scroll', progressSetter)
  } else {
    $btn.text("Close ↑");
    $scroller.on('scroll', progressSetter)
  }

  $container.toggleClass('In');
  $('body').toggleClass('hideOverflow');
  $btn.toggleClass("clicked");
});

https://jsfiddle.net/uo34ru7d/76/

如我所见，您使用了教程中的示例代码。试着弄清楚这个滚动绑定(bind)函数是如何工作的(以及事件绑定(bind)本身)，你将能够为窗口和你的蓝色容器创建一个函数，把它作为你的作业；)