来大伙都芝麻说说语音抢红包qq刷红包都抢了多少

js操作滚动条事件实例
投稿:shichen2014
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了js操作滚动条事件的方法,实例分析了滚动条的使用技巧与相关注意事项,需要的朋友可以参考下
本文实例讲述了js操作滚动条事件的方法。分享给大家供大家参考。具体分析如下:
之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了。
下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollT
if (t & 0) {
$(".cbbfixed").css("bottom", "10px");
$(".cbbfixed").css("bottom", "-85px");
t:滚动条距离top端的距离
t&0,即滚动条一旦滚动,立即执行if()语句,else()中的代码是,滚动条到到top处时,返回顶部的div隐藏
返回顶部按钮的点击操作:
$("#cgotop").click(function(){
$('body,html').animate({ scrollTop: 0 }, 100);
1、监听某个元素的滚动条事件
$(selector).scroll(function(){.......});
2.获取滚动条滚动的距离
$(selector).scrollTop();
$(selector).scrollLefft();
&PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:
javascript事件与功能说明大全:
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具相关素材推荐
高质量自定义滚动条特效代码
jQuery无图片网站回到顶部特效
不随滚动条滚动的固定广告代码
滚动条滚动事件
js网页滚动条滚动事件
Jquery滚动条事件的处理
PDA DataGrid的滚动条事件处理
滚动条添加事件
javascript跟随滚动条滚动,onscroll事件的学习
compact framework 模拟滚动条的mouseup事件
touchmove事件与滚动条
windows moible DataGrid的滚动条单击事件
相关专题推荐
本周最热素材推荐
相关搜索标签
闽ICP备号-7&&QQ交流群: 业务合作QQ:JS事件-鼠标滚轮事件
之前学习了onmouver,onmousedown等鼠标事件,今天来看看鼠标的滚轮事件,兼容一直是让人比较恶心的事情,今天就让我们将恶心进行到底,看看这个恶心的鼠标滚轮事件!
鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的,但是火狐FF下却不识别onmousewheel,在FF下需要用DOMMouseScroll,并且必须用&事件监听&方式添加事件才有效;
而大家都知道&事件监听&方式绑定事件:
IE下是通过attachEvent实现事件监听
而Chrome和FF下通过addEventListener 来实现事件监听
这个场面是够恶心了:
事件监听 滚轮事件
谷歌 addEventListener onmousewheel
IE attachEvent onmousewheel
FF addEventListener DOMMouseScroll
为了浏览器兼容,我们自己封装一个&绑定事件的函数&
function addEvent(obj,xEvent,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
obj.addEventListener(xEvent,fn,false);
window.onload = function () {
//接着利用我们自己封装的函数给div绑定事件,
var oDiv = document.getElementById('div1');
addEvent(oDiv,'mousewheel',onMouseWheel);
addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
// 当滚轮事件发生时,执行onMouseWheel这个函数
function onMouseWheel() {
alert('haha');
有时候当鼠标滚轮滚动的时候我们需要知道滚轮是向上滚的还是向下滚的。
在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的
当返回值为正值的时候,说明是向上滚
当返回值是负值的时候,说明是向下滚
但是event.wheelDelta在火狐下并不起作用,在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚,火狐下还有一点不同:
当返回值为正值的时候,说明是向下滚
当返回值是负值的时候,说明是向上滚
接下来,实现当滚轮向下滚动时div的高度增大,向上滚时div高度减小
1. 需要定义一个标志位,标志滚轮是向上滚还是向下滚
2. 需要做浏览器兼容
3. 还要阻止浏览器默认行为
window.onload = function () {
var oDiv = document.getElementById('div1');
function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/
var ev = ev || window.
var down = // 定义一个标志,当滚轮向下滚时,执行一些操作
down = ev.wheelDelta?ev.wheelDelta&0:ev.detail&0;
oDiv.style.height = oDiv.offsetHeight+10+'px';
oDiv.style.height = oDiv.offsetHeight-10+'px';
if(ev.preventDefault){/*FF 和 Chrome*/
ev.preventDefault();// 阻止默认事件
addEvent(oDiv,'mousewheel',onMouseWheel);
addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
function addEvent(obj,xEvent,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
obj.addEventListener(xEvent,fn,false);| 您所在的位置: >
> js监听滚动条滚动事件使得某个标签内容始终位于同一位置js监听滚动条滚动事件使得某个标签内容始终位于同一位置更新:&&&&编辑:封云亭&&&&来源:gupuxiazai&&&&人气:加载中...&&&&字号:|标签:&&&&&&&&&&&& &js如何条,,,下面有个不错的示例,大家可以参考下
小点,废话不多说,直接上代码& 
| 分类选择您可能在找这些Vue.js实战之通过监听滚动事件实现动态锚点
来源:易贤网&& 阅读:544 次&&日期: 13:50:04
温馨提示:易贤网小编为您整理了“Vue.js实战之通过监听滚动事件实现动态锚点”,方便广大网友查阅!
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址:
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论!()
自觉遵守:爱国、守法、自律、真实、文明的原则
尊重网上道德,遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论,本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款

我要回帖

更多关于 qq手机刷新红包2018 的文章

 

随机推荐