Question

我在div中触发滚动条事件。它没有被触发。

我的情景：

滚动到底部时想要提醒用户。我正在分享示例代码。

<div class="screen">
    <div class="main_wrap" id="Main">
       <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div>
 <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div>
 <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div> <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div> <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div>
 <div class="sub-wrap">
            <div class="title">
            </div>
            <div class="desc">
            </div>
        </div>
    </div>
</div>

我试过这样的事。

    $('#Main').bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            ajaxPost.GetCommunityInfoList();
        }
    });

提出我的想法。提前致谢

Answer 1

请查看以下代码，它可能对您有帮助....

＆＃13;

$('.screen').bind('scroll', function(){
  if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
  {
    alert('end reached');
  }
});

＆＃13;

.screen{
  height : 400px;
  background : black;
  overflow-y: scroll;
}
#Main{
  height : 600px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="screen">
  <div class="main_wrap" id="Main">
    <div class="sub-wrap">
      <div class="title">
      </div>
      <div class="desc">
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
      </div>
      <div class="desc">
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
      </div>
      <div class="desc">
      </div>
    </div> <div class="sub-wrap">
    <div class="title">
    </div>
    <div class="desc">
    </div>
    </div> <div class="sub-wrap">
    <div class="title">
    </div>
    <div class="desc">
    </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
      </div>
      <div class="desc">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

是的，你可以做到。考虑一下我的例子

可以将scroll事件处理程序绑定到此元素：

$( "#target" ).scroll(function() {
$( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
});

现在，当用户向上或向下滚动文本时，会将一条或多条消息附加到：调用.scroll（）的处理程序。要手动触发事件，请应用不带参数的.scroll（）

$( "#other" ).click(function() {
$( "#target" ).scroll();
});

执行此代码后，单击Trigger处理程序也会附加消息。

无论原因如何，只要元素的滚动位置发生变化，就会发送滚动事件。在滚动条上单击鼠标或拖动，在元素内拖动，按箭头键或使用鼠标滚轮可能会导致此事件。

Answer 3

您可以尝试这样的事情：

    function div_scroll(e) { var mydiv = $(e.currentTarget);
     if(mydiv[0].scrollHeight - mydiv.scrollTop() == mydiv.outerHeight())
 alert('at bottom');
    }

    $(function () { $('#main').bind('scroll', div_scroll); });

Answer 4

你可以简单地使用.scroll（）和.scrollTop来实现这个

选中此JSFiddle

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    alert("bottom!");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
  <div class="main_wrap" id="Main">
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>
    <div class="sub-wrap">
      <div class="title">
        Lorem ipsum dolor sit amet
      </div>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel,
      </div>
    </div>

  </div>
</div>

我们可以为div使用滚动事件吗？

4 个答案: