Question

我正在建立一个带有固定div的网站。每个页面固定为100px在页面上滚动。

其中一个固定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>

固定div且内部具有可滚动div-scrollTop（）返回0

1 个答案:

演示：