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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
JS分页的实现(同步与异步)
2017/09/16 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python实现顺时针打印矩阵
2019/03/02 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python 操作excel表格的方法
2020/12/05 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
迟到检讨书1000字
2014/01/15 职场文书
小学新学期寄语
2014/04/02 职场文书
医生见习报告范文
2014/11/03 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python