当前位置: 首页 > 编程笔记 >

js操作滚动条事件实例

崔琦
2023-03-14
本文向大家介绍js操作滚动条事件实例,包括了js操作滚动条事件实例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了js操作滚动条事件的方法。分享给大家供大家参考。具体分析如下:

之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了。

下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码

window.onscroll = function () { 
 var t = document.documentElement.scrollTop || document.body.scrollTop;
 if (t > 0) { 
 $(".cbbfixed").css("bottom", "10px"); 
 } else { 
 $(".cbbfixed").css("bottom", "-85px"); 
 } 
}

注:

t:滚动条距离top端的距离

t>0,即滚动条一旦滚动,立即执行if()语句,else()中的代码是,滚动条到到top处时,返回顶部的div隐藏

返回顶部按钮的点击操作:

$("#cgotop").click(function(){ 
 $('body,html').animate({ scrollTop: 0 }, 100); 
 return false; 
});

补充:

1、监听某个元素的滚动条事件

$(selector).scroll(function(){.......});

 
2.获取滚动条滚动的距离

$(selector).scrollTop();
$(selector).scrollLefft();

 PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

http://tools.jb51.net/table/javascript_event

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍js网页滚动条滚动事件实例分析,包括了js网页滚动条滚动事件实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设

  • 本文向大家介绍js滚轮事件 js自定义滚动条的实现,包括了js滚轮事件 js自定义滚动条的实现的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js自定义滚动条的实现的具体代码,供大家参考,具体内容如下 描述: 自定义滚动条的实现 效果: 实现: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 我已经在我的页面上实现了平滑滚动条,它的工作相当不错,但我也想在滚动内容中添加一些过渡效果。基本上,我想在一个滚动事件上做这件事,但我不知道scrollbar的工作有多流畅,以及在滚动事件上执行什么对象。我检查了#my-scrollbar没有执行此操作: 滚动事件的原因是什么?或者有没有其他的方法可以做一些额外的效果而不检查滚动事件? 编辑:我正在粘贴我的代码(我正在使用react.js)来进行更

  • 本文向大家介绍JS实现判断滚动条滚到页面底部并执行事件的方法,包括了JS实现判断滚动条滚到页面底部并执行事件的方法的使用技巧和注意事项,需要的朋友参考一下 需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部

  • 本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法,包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项,需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法: jQuery: JavaScript: 以上2种方法均可以实现页面加载时滚动条自动滚动到底,小伙伴们根据自己的实际需求,自由选择吧

  • 本文向大家介绍原生js实现自定义滚动条,包括了原生js实现自定义滚动条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现自定义滚动条的具体代码,供大家参考,具体内容如下 1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 2.css样式文件 通过容器溢出隐藏,文本区域的绝对定位,然后再交给js处理。 3.js脚本代码 以上就是本