Js控制滑轮左右滑动实例


Posted in Javascript onFebruary 13, 2015

今天弄了一个东西,页面本来是横向,所以底部有横向滚动条,竖着就没有滚动条了,现在要求是鼠标滑轮要左右滚动,这就需要写js代码来实现了,写这个的过程中遇到很大麻烦

ie 火狐 chrome 三个浏览器支持的函数完全不一样,真是疯啦。

这里有几个知识点说明一下
监控滑轮的事件
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
哎真是无语
滚动的返回值也是不一样的
firfox用detail 返回 +-3
其他的用wheelDelta 返回 +-120
有返回值判断滚动的方向

还有一般浏览器除了chrome判断页面的左移动用document.documentElement.scrollLeft
但是chrome浏览器要用document.body.scrollLeft

好了代码分享如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<div id="test" style="width:3000px; height:500px; background:#666;"></div>
<script language="javascript">
 
var dbody=document.getElementById('test');
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})
 
//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})
 
//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
e=e || window.event;
var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0?-50:50;
document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;
 
return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
else oEle.addEventListener(sEventName, fnHandler, false);
}
 
 
</script>
</body>
</html>

这个代码其实有点问题就是在chrome浏览器下只有鼠标放到那个灰色内才能滑动,这个问题我一直没有解决掉,如果那个高手解决可以留言告诉我,谢谢了。

Javascript 相关文章推荐
js局部刷新页面时间具体实现
Jul 04 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
JavaScript函数作用域链分析
Feb 13 #Javascript
JavaScript匿名函数用法分析
Feb 13 #Javascript
js实现进度条的方法
Feb 13 #Javascript
动态加载js的方法汇总
Feb 13 #Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
jQuery向后台传入json格式数据的方法
Feb 13 #Javascript
浅谈轻量级js模板引擎simplite
Feb 13 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
smarty简单分页的实现方法
2014/10/27 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php接口技术实例详解
2016/12/07 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PDO::query讲解
2019/01/29 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
实例Python处理XML文件的方法
2015/08/31 Python
pandas带有重复索引操作方法
2018/06/08 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python学习之os模块及用法
2020/06/03 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
税务会计岗位职责
2014/02/18 职场文书
品质口号大全
2014/06/17 职场文书
六查六看剖析材料
2014/10/06 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL