js或jq怎么实现滚轮控制页面上下滑动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js或jq怎么实现滚轮控制页面上下滑动相关的知识，希望对你有一定的参考价值。
参考技术A jQuery监听鼠标滚轮(滚动)事件第一步：下载jquery-mousewheel插件
第二步：复制以下代码做测试，打开日志看效果
jQuery(function($)
$('#nav')
.bind('mousewheel', function(event, delta)
var dir = delta > 0 ? 'Up' : 'Down';
if (dir == 'Up')
console.log(“向上滚动， www.imiansha.com”);
else
console.log(“向下滚动， http: //blog.csdn.net/u011627980”);
return false;
);
);
监听鼠标滚轮（js+jq），xp系统下也OK
应项目需求，运用了监听滚轮的事件，发现在xp系统下使用jquery的mousewheel.js来做，会导致无论滚轮怎么滚，都只能向下滚。。。后面使用了原生js的，就可以了。
jquery：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>鼠标滚轮_jquery</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <style> #did { width: 100px; height: 100px; background-color: #0ff; } </style> </head> <body> <div id="did"></div> <label for="detail">滚动方向:</label><input type="text" id="detail" /> </body> <script> $(document).ready(function () { $("#did").on(‘mousewheel‘, function (event, delta) { var dir = delta > 0 ? ‘向上‘ : ‘向下‘; $("#detail").val(dir) }); }); </script> </html>
原生js（xp系统下用这个）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>鼠标滚轮_原生js</title> </head> <style> #did { width: 100px; height: 100px; background-color: #0ff; } </style> <body> <div id="did"></div> <label for="wheelDelta">滚动方向:</label>(IE/Opera)<input type="text" id="wheelDelta" /><br> <label for="detail">滚动方向:(Firefox)</label><input type="text" id="detail" /> </body> <script> var scrollFunc = function (e) { e = e || window.event; var t1 = document.getElementById("wheelDelta"); var t2 = document.getElementById("detail"); if (e.wheelDelta) { //IE/Opera/Chrome t1.value = e.wheelDelta < 0 ? ‘向下‘ : ‘向上‘; } else if (e.detail) { //Firefox t2.value = e.detail < 0 ? ‘向上‘ : ‘向下‘; } } /*注册事件*/ if (document.getElementById("did").addEventListener) { document.getElementById("did").addEventListener(‘DOMMouseScroll‘, scrollFunc, false); } //W3C document.getElementById("did").onmousewheel = scrollFunc; //IE/Opera/Chrome </script> </html>
G~ G~ Study。
以上是关于js或jq怎么实现滚轮控制页面上下滑动的主要内容，如果未能解决你的问题，请参考以下文章
我再页面上使用swiper实现上下滑动，怎么滑动到一半的时候就回弹了，滑不到最后一个