如何用js监听滚动条滚动事件

documentonscroll = function(){

if(documentbodyscrollTop+documentbodyclientHeight>=documentbodyscrollHeight){

alert('bottom');

}

}

body里放一个高度2000的div。不保证IE。

这里有一个例子，希望可以帮到你

$(window)scroll(function()

{

//

当滚动到最底部以上100像素时，

加载新内容

if

($(document)height()

-

$(this)scrollTop()

-

$(this)height()

<

100)

{

if

(flag)

{

var

$boxes

=

$(getList());

$containerappend($boxes)masonry('appended',

$boxes);

}

}

});

1 scroll事件在滚动条滚动时被触发

2 scroll检测的是滚动条的滚动，当滚动条不能滚动（到顶或到底）时，scroll便不再触发

3 默认滚动不能禁止

4 scroll事件可以被高频率的触发,事件处理程序不应该执行高性能消耗的 *** 作,推荐的做法是scroll里面的 *** 作使用requestAniamtionFrame() *** 作

5 感觉animateJS应该做了这个优化吧

1 wheel在鼠标滚轮滚动的时候被触发,由于鼠标滚轮时大部分都会触发scroll事件,所以wheel事件先触发

2 一旦滚动条到底部的时候,滑动鼠标滚轮继续滚动,wheel还是会一直触发,而scroll这时不会触发

3 可以禁止滚轮滚动

4 不要将 wheel 事件与[ scroll ]事件混淆。事件的默认 *** 作 wheel 是特定于实现的，不一定调度 scroll 事件。即使是这样，事件 delta 中的值 wheel 也不一定反映内容的滚动方向。因此，不要依赖 wheel 事件的 delta 属性来获取滚动方向。相反，检测事件[ scrollLeft ]中[ scrollTop ]目标的值变化。 scroll

5 中间滚轮按下去的时候也可以滚动,但是不会触发scroll事件

6 better-scroll的处理 *** 作,真正和滚动有关的只有wheel事件,没有监听scroll事件而且他这种 *** 作是会屏蔽中键按下触发滚动的这种 *** 作不知道屏蔽之后可不可以

7 mouseWheel是非标准事件,已经被这个事件代替

8 属性

9 据滚轮方向（即该事件的各delta属性值）来推断文档内容的滚动方向，因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为，也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。需要检查元素的scroll值判断才知道是朝什么方向滚动

10 他的滚动完全就是用whell自己做

11 属性

1 scroll,wheel,mousewheel,DOMMouseScroll

2 兼容性

[上传失败(image-d0be31-1647574199505)]

1 需要ref拿到dom *** 作,这里被普通的接管了,普通的是可以通过epreventDefaault()阻止了默认的滚动,但是鼠标中间键按下触发的滚动,是无法阻止的,并且不会触发wheel事件,那这里就不行了,所以还是不能用wheel来做这个

2

如果使用jquery的话，可以这样写：

$(window)bind("scroll", function(){ 

        var top = $(this)scrollTop(); // 当前窗口的滚动距离

  });

如果使用原生js，可以这样写（摘自网上的）：

/ 

  获取<a href=">

MFC鼠标滚轮消息WM_MOUSEWHEEL

使用WM_MOUSEWHEEL

需要把CWnd设定为Focus

ON_WM_MOUSEWHEEL( )

CWnd::OnMouseWheel

afx_msg BOOL OnMouseWheel( UINT nFlags, short zDelta, CPoint pt );

返回值：如果允许鼠标轮滚动，则返回非零值；否则返回0。

参数：

nFlags 指明是否按下了虚拟键。这个参数可以是下列值的组合：

· MK_CONTROL 如果CTRL键被按下，则设置此位。

· MK_LBUTTON 如果鼠标左键被按下，则设置此位。

· MK_MBUTTON 如果鼠标中键被按下，则设置此位。

· MK_RBUTTON 如果鼠标右键被按下，则设置此位。

· MK_SHIFT 如果SHIFT键被按下，则设置此位。

zDelta 指明了旋转的距离。zDelta值以WHEEL_DELTA，即120的倍数或部分的形式表达。小于零的数表明往回滚动（向着用户），而大于零的数表明滚向远处（离开用户）。用户可以在鼠标软件中改变滚轮设置以反转这种响应。有关这个参数的更多信息参见说明部分。

pt 指定了光标的x和y轴坐标。这些坐标通常是相对于窗口的左上角的。

<div id="wrapper">

<div id="inner">

<!--content goes here /-->

</div>

</div>

function load(wrapper,inner,fn){

wrapper = documentgetElementById(wrapper);

inner = documentgetElementById(inner);

var ih = inneroffsetHeight,

wh = wrapperoffsetHeight;

/

自行定义附加事件方法

/

addEvent(wrapper,'scroll',function() {

if(wrapperscrollTo + wh >= ih - 30){

fn && fn();

}

});

}

以上就是关于如何用js监听滚动条滚动事件全部的内容，包括:如何用js监听滚动条滚动事件、如何用JS获取鼠标滚动高度，再触发相应的事件。速救！！！、scroll和wheel事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！