Question

我需要检测用户是否已滚动到HTML页面中 UL 的顶部

foreach (GridViewRow row in gvMyGridView.Rows)
{

}

我使用此代码检测用户是否滚动到页面的底部：

       <ul id="color-list">
              <li>Red</li>
              <li>Blue</li>
              <li>Purple</li>
              <li>Blue</li>
              <li>Yellow</li>
              <li>Black</li>
              <li>White</li>
       </ul>

显然这不适用于＆lt; ul＆gt;。我应该做些什么改变？

Answer 1

$().scrollTop()返回从顶部滚动了多少元素

$().innerHeight()返回元素的内部高度（无滚动）

DOMElement.scrollHeight返回元素内容的高度（带滚动）

$('#color-list').on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  if (scrollTop + $(this).innerHeight() >= this.scrollHeight) {
    $('#message').text('end reached');
  } else if (scrollTop <= 0) {
    $('#message').text('Top reached');
  } else {
    $('#message').text('');
  }
});

#message {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="color-list" style="height: 150px;overflow-y: scroll">
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
</ul>
<div id='message'></div>

Answer 2

因此，您可以获取scrollTop（）和innerHeight（）的总和，当它们等于scrollHeight（）时，将发送警报：

$('#color-list').on('scroll', function() {
     if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
         alert('End of List');
     }
 })

Answer 3

试试这个并告诉我

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    alert("End of Page");
  }
});

Answer 4

我按照你的例子，这只是一个更简单的解决方案，如果你需要检查它是否在顶部，我需要一些检查滚动到顶部，所以这里有一些改变的代码，也许对于某人会有所帮助：< / p>

jQuery(document).ready(function () {
jQuery(window).on('scroll', function () {
    var vLogo = jQuery(".header-logo-wrap");
    var scrollTop = jQuery(this).scrollTop();
    vLogo.addClass('logoOnScroll');
    if (scrollTop === 0) {
        vLogo.removeClass('logoOnScroll');
    }
});
});

所以，检查它是否为0，感谢您的帮助..干杯

Answer 5

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // when scroll to bottom of the page
        console.log("bottom")
    }
    console.log("scrollHeight:"+scrollHeight)
});

检测用户是否滚动到UL的顶部或底部

5 个答案: