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

Question

我正在建立一个带有几个固定 div 的网站。它们中的每一个都固定在页面上滚动 100 像素。

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

对于整个站点，该功能scrollTop()正在运行并返回我到目前为止滚动的像素。但是当我尝试scrollTop()在内部 div 上使用该函数时，它总是返回 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>

标签： javascripthtmlcss

Answer 1

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

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>