javascript - 修复了内部带有可滚动 div 的 div - scrollTop() 返回 0

Question

我正在用一些固定的 div 构建一个网站。它们中的每一个都固定在页面上滚动 100 像素。

在其中一个固定的 div 中是一个可滚动的嵌套 div。可以在此 div 内滚动。我想在 javascript 中反馈我在 div 内滚动了多远，以注意它何时到达 div 的底部。

对于整个站点，函数 scrollTop() 正在运行并返回我到目前为止滚动的像素。但是当我尝试在内部 div 上使用 scrollTop() 函数时，它总是返回 0。我不知道如何解决这个问题。

var aboutscroll = $('#timeline');
console.log(aboutscroll.scrollTop() + " px");

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#chapter2 {
  width: 100vw;
  position: fixed
}

<div class="row" id="chapter2">
  <div class="black col-lg-6 col-xs-12" style="color:white">
    <p>About</p>

  </div>
  <div class="white col-lg-6 col-xs-12">

    <div class="timeline" id="timeline">
      <div class="kontainer left">
        <div class="content">
          <h2>2017</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2016</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2015</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2012</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2011</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2007</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要在要监控的 DIV 上使用 jQuery .scroll() 方法:

var aboutscroll = $('#timeline');
aboutscroll.scroll(function(){
    //do stuff here
});

演示:

var aboutscroll = $('#timeline');
aboutscroll.scroll(function(){
    $('#msg').html( $(aboutscroll).scrollTop() + " px" );
});

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#chapter2 {
  width: 100vw;
  position: fixed
}
#msg{position:fixed;top:0;right:0;max-width:80px;padding:15px;text-align:center;background:wheat;z-index:2;}

<div class="row" id="chapter2">
  <div class="black col-lg-6 col-xs-12" style="color:white">
    <p>About</p>

  </div>
  <div class="white col-lg-6 col-xs-12">
    <div class="timeline" id="timeline">
      <div class="kontainer left">
        <div class="content">
          <h2>2017</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2016</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2015</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2012</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2011</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2007</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="msg"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>