滚动条的scroll事件和change事件有啥区别
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动条的scroll事件和change事件有啥区别相关的知识,希望对你有一定的参考价值。
点三角箭头、空白的地方就是change,拖动那个块的时候就是scroll 参考技术A 当你拖动滚动条的过程中,就会不停的触发scroll事件当你拖动滚动条,然后放开的一瞬间,触发change事件 参考技术B 当用鼠标拖动滑块移动时,scroll事件和change事件都发生,只不过scroll发生在滑块移动的过程中(会多次触发),而change是发生在移动结束的瞬间(只触发一次)。
scroll()和scrollTop()方法——实现电商网站中的电梯导航
要想实现电商网站的电梯导航效果,首先需要了解以下知识点:
jquery 事件 - scroll() 方法
对元素滚动的次数进行计数,当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
jquery CSS 操作 - scrollTop() 方法
设置元素中滚动条的垂直偏移,scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;scroll top offset 指的是滚动条相对于其顶部的偏移;如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
【scrollTop()俗称“卷边函数”,获取到的是当滚动条滚动时,该页面文档被浏览器最顶端所卷去的高度;另外还有scrollLeft()方法,顾名思义是被浏览器最左端所卷去的距离】
jQuery CSS 操作 - offset() 方法
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
-
电梯导航的结构布局怎么做?
布局这一块并不是固定的,只要效果达到就好。<ul class="dianTi"> <li> 1F <div class="wenZi">服饰</div> </li> <li> 2F <div class="wenZi">美妆</div> </li> <li> 3F <div class="wenZi">手机</div> </li> <li> 4F <div class="wenZi">家电</div> </li> <li> 5F <div class="wenZi">数码</div> </li> </ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
-
电梯导航的CSS样式该怎么写?
宽度可以给一个固定的值;高度本应该由JS去控制,这里是给的固定的值;定位方式采用的是固定定位,让它垂直到中间,水平先到浏览器的中间,然后设置margin-left为负的网页版心的一半距离,这样就紧贴在页面左侧位置了;默认是隐藏的。<style type="text/css"> .dianTi{width: 30px; height: 150px; position: fixed; top: 50%; margin-top: -75px; left: 50%; margin-left: -660px; color: #666; cursor: pointer; display: none;} .dianTi li{height: 29px; border-bottom: 1px dotted #ccc; text-align: center; line-height: 29px; position: relative;} .wenZi{width: 29px; height: 29px; position: absolute; left: 0; top: 0; color: #C81623; background: #fff; display: none;} .dianTi li.current .wenZi{display: block;} .dianTi li:hover .wenZi{display: block; background: #C81623; color: #fff;} </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
-
怎么实现最终的效果?
1.电商网站一般是吧商品分为一楼、二楼、三楼…所以,第一步先要获取每一个楼层相对于document (0,0)的距离。//检测楼层时,跳转时,不需要那么精确,所以减去100 var f1Top=$(‘.f1‘).offset().top-100; var f2Top=$(‘.f2‘).offset().top-100; var f3Top=$(‘.f3‘).offset().top-100; var f4Top=$(‘.f4‘).offset().top-100; var f5Top=$(‘.f5‘).offset().top-100;
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2.检测楼层,用scrollTop()方法获取当滚动条滚动时每次最新的被卷去的高度,即当前可视区域内最顶部距离document (0,0)的距离,然后拿这个距离的值去和之前得到的每个楼层对应的值进行比较,就可以知道当前滚动条滚动到哪个区域了。这里最好将这个功能性的模块封装起来,写成一个方法,然后用$(window).scroll(jianCe)去调用。
var jianCe=function(){ var windowScrollTop=$(window).scrollTop(); if(windowScrollTop>=f5Top){ console.log(‘到达5楼‘); //到达5楼 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(4).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f4Top){ console.log(‘到达4楼‘); //到达4楼 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(3).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f3Top){ console.log(‘到达3楼‘); //到达3楼 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(2).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f2Top){ console.log(‘到达2楼‘); //到达2楼 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(1).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f1Top){ console.log(‘到达1楼‘); //到达一楼 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(0).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else{ //不再5楼中的任意一层时,让电梯导航隐藏 $(‘.dianTi‘).hide(); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
3.当点击左侧电梯导航时,也需要对应起来,因为在点击时,按钮会有一个特殊类用于突出显示,如果从5层跳到1层,会经过4,3,2,这样就会看到整个跳转的过程,所以,这里需要用到一个off()方法,用于取消绑定事件,$(window).off(‘scroll’); 因为你移除了scroll事件,当前这个LI具备特殊类名还要再书写一次,最后只需要判断当前点击的是第几层,做相应的操作即可。
$(‘.dianTi li‘).click(function(event) { //在动画运动的过程中,不希望current特殊类名跟着满世界跑 //所以把让current满世界跑的源头掐掉 //源头:$(window).scroll() $(window).off(‘scroll‘); //因为你移除了scroll事件,当前这个LI具备特殊类名还要再书写一次 $(this).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); //需要知道现在要往几层楼跳 //得到当前这个LI的序号,这个序号加1就是你需要去的楼层 var i=$(this).index()+1; if(i==5){ //要往第5层跳 //检测楼层时,希望的差不多到了;跳转时,需要精确,所以再加上100 //f5Top是5层距离document (0,0)点的距离 //但是当动画执行完毕了,还要继续检测楼层 $(‘html,body‘).stop().animate({‘scrollTop‘:f5Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==4){ $(‘html,body‘).stop().animate({‘scrollTop‘:f4Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==3){ $(‘html,body‘).stop().animate({‘scrollTop‘:f3Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==2){ $(‘html,body‘).stop().animate({‘scrollTop‘:f2Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==1){ $(‘html,body‘).stop().animate({‘scrollTop‘:f1Top+100}, 500,function(){ $(window).scroll(jianCe); }); } });
以上是关于滚动条的scroll事件和change事件有啥区别的主要内容,如果未能解决你的问题,请参考以下文章