首页技术js滚动条滚动事件,js如何设置顶部滚动条

js滚动条滚动事件,js如何设置顶部滚动条

编程之家2026-06-27733次浏览

很多朋友对于js滚动条滚动事件和js如何设置顶部滚动条不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!

js滚动条滚动事件,js如何设置顶部滚动条

JS - 滚动事件(onscroll)

当浏览器滚动条滚动时会触发 onscroll事件,通常情况下指上下滚动条滚动。

需要注意的是,浏览器一旦检测到滚动条发生滚动,就可以触发 onscroll事件,而无需等到滚动行为结束。

下面的例子演示了一个极普遍的应用:利用 onscroll事件检测滚动条位置,当向下滚动到一定位置时,在页面右下角会出现“返回顶部”的锚链接,以方便网站用户快速返回顶部。

js如何在页面滚动到一定位置时触发事件

要实现这样的效果你需要使用到滚动条事件以及元素在文档中的绝对定位。

比如我加载了100条微博,第一百条微博这个块级元素为 myBlock,使用递归往上寻找父元素的方法求得myBlock在文档中的绝对位置:

function getTop(e)

js滚动条滚动事件,js如何设置顶部滚动条

{

var offset=e.offsetTop;

if(e.offsetParent!=null)//只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度

offset+=getTop(e.offsetParent);

return offset;

}

var myBlockTop= getTop(myBlock);

获得了第100条微博的绝对高度后注册滚动条事件:window.addEventListener("scroll",function(){

if(document.body.scrollTop+(document.body.clientHeight|| window.innerHTML)>= myBlockTop){

//当当前可视部分底部到达第100条微博的高度坐标时,进入这个if块

}

}

大概就这么实现,希望对您能有帮助

//----------------------------------------------

IE9以下对W3C标准支持得异常惨烈好像不支持那个window.addEventListener()得使用window.attachEvent('onscroll',function(){.......................});

反正思路是这样,你自己可以试试

js 或者 jquery 怎么得到滚动条

你的描述很不清楚,我只能认为元素位于浏览器正中位置了。因为对于滚动条只能获取它的scrollTop,那么只能在这个上面想办法。在这里你就要建立一个等式,四个参数,滚动条的scrollTop,window的height,目标元素的offerset.top和它自身的height。给window一个scroll事件,

通过验证上面所说的等式是否成立,执行你要的代码。

关键你要确定你的某个元素要在何时触发你的事件

打字不易,如满意,望采纳。

好了,关于js滚动条滚动事件和js如何设置顶部滚动条的问题到这里结束啦,希望可以解决您的问题哈!

契魔者,契魔者带巨剑还是太刀原神植被?原神是什么意思