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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
jQuery操作css样式
May 15 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
JavaScript中this用法学习笔记
Mar 17 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
Python操作MySQL简单实现方法
2015/01/26 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Python交互环境下实现输入代码
2018/06/22 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
中职生自荐信
2013/10/13 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
简历的自我评价
2014/02/03 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
男女朋友协议书
2014/04/23 职场文书
募捐感谢信
2015/01/22 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
员工旷工检讨书
2015/08/15 职场文书