javascript滚动栏响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件：

<script type="text/javascript"><pre name="code" class="javascript">var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120){//向上滚动事件alert(e.wheelDeta +"向上");}else{ //向上滚动事件alert(e.wheelDeta +"向上");} }else if(e.detail){//Firefox if(e.detail==-3) { //向上滚动事件<br> alert(e.detail +"向上");}else { //向下滚动事件<br>alert(e.detail +"向下 ");} } };if(document.addEventListener){ //adding the event listerner for Mozilladocument.addEventListener("DOMMouseScroll" ,scrollFunc, false);}//IE/Opera/Chrome window.onmousewheel=document.onmousewheel=scrollFunc;</script>

还有还有一种方法：

使用jquery.mousewheel.js插件，个人认为这个挺好用，类似与jQuery封装了，攻克了个浏览器的兼容性：

使用例如以下：

1. 首先导入jquery.mousewheel.js文件

2. 在你要使用的区域内加入mousewheel事件

<pre name="code" class="javascript"><pre name="code" class="javascript">    $(function (){ $("#XXXX").bind("mousewheel", function(event) {event.preventDefault();if(event.deltaY=="-1"){//向下滚动事件<br>}else{//向上滚动事件}});});

javascript滚动栏响应鼠标滑轮的实现上下滚动事件相关推荐

java响应鼠标滚轮事件_javascript滚动条响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e ...
鼠标滑轮控制Div水平滚动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
java控制鼠标滑轮的滚动速度来滚动滚动面板和鼠标滑轮滚动事件
//虽然比较短,但还是分享下吧....就当是个随笔吧- //设置滚动面板的滚动速度 JScrollPane.getVerticalScrollBar().setUnitIncrement(10); / ...
滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
js 鼠标滑轮控制左右横向滚动
代码的实现通过jquery监听滑轮滚动,不推荐原生实现,原生实现还要处理不同浏览器监听的方式和兼容性,jquery已经帮我们做了很多处理了. 代码: <!DOCTYPE html> < ...
html中滚动栏的样式
DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日星期日 01:181)隐藏滚动栏 <body style="overflow- ...
浏览器滑块、鼠标事件、鼠标滑轮、键盘事件详细说明
鼠标滑轮必须是在 mousewheel 事件中注册事件 window.addEventListener("mousewheel ",function(){}); event ...
Vue+JavaScript实现鼠标滑轮滑动控制元素横向滚动
实现列表跟随鼠标滑轮滑动横向滚动第一步:父元素设置为 overflow-x: scroll(竖向同理) .scroll-box{width: 1000px;overflow-x: scroll; ...
html怎么做到滚动鼠标转换,横向的网页如何实现鼠标滑轮横向移动？_html/css_WEB-ITnose...
横向的网页如何实现鼠标滑轮横向移动? 我做一个学校的点餐网页,想横向的形式,网页已经做出来了,如何实现鼠标滚轮是横向来移动滚动条的? 还有有没可能添加一个按钮,按一下制定滚动条向右移动某些个像素点?我 ...
更改Windows鼠标滑轮滚动方向
经常在Mac和Windows PC切换的人往往会遇到这样一个问题,那就是鼠标滑轮的方向恰好相反.改变Mac的鼠标滑轮滚动方向很简单,系统偏好设置-鼠标-滚动方向,把"自然"的对勾勾 ...

javascript滚动栏响应鼠标滑轮的实现上下滚动事件

javascript滚动栏响应鼠标滑轮的实现上下滚动事件相关推荐

最新文章

热门文章