Js调整滑轮左右滑行实例,js滑轮滑动实例

作者: 计算机网络技术  发布:2019-09-06

明日弄了贰个东西,页面本来是横向,所以尾部有横向滚动条,竖着就从不滚动条了,今后要求是鼠标滑轮要左右轮转,那就供给写js代码来落到实处了,写这几个的长河中相见相当大麻烦

Js调节滑轮左右滑动实例,js滑轮滑动实例

前天弄了贰个东西,页面本来是横向,所以底部有横向滚动条,竖着就从不滚动条了,今后供给是鼠标滑轮要左右轮转,那就需求写js代码来完毕了,写这一个的进程中蒙受极大麻烦

ie 火狐 chrome 多个浏览器匡助的函数完全不一致等,真是疯啊。

此地有多少个知识点说雀巢(Nestle)(Beingmate)下
监察滑轮的风浪
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浏览器下独有鼠标放到那多少个墨绿内本事滑动,这一个主题材料自身直接从未解决掉,假设这个高手消除能够留言告知我,多谢了。

前些天弄了一个东西,页面本来是横向,所以尾巴部分有横向滚动条,竖着就从没有过滚动条了,将来供给...

ie 火狐 chrome 八个浏览器支持的函数完全分裂样,真是疯啊。

此间有多少个知识点说雅培(Abbott)下
监督检查滑轮的风浪
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浏览器下唯有鼠标放到那些法国红内手艺滑动,这些主题材料自身一贯未曾缓慢解决掉,假诺那多少个高手化解能够留言告知笔者,多谢了。

你只怕感兴趣的稿子:

  • js完毕touch移动触屏滑动事件
  • js实现辅帮手提式无线电话机滑动切换的轮播图片效果实例
  • 原生js完毕活动支付轮播图、相册滑动特效
  • 用原生js做个轻巧的滑动效果的回来最上端
  • js剖断横竖屏及禁止浏览器滑动条示例
  • 大概通用的JS滑动门代码
  • js通用滑动门类
  • js自动滑动+鼠标滑动区域
  • 一个js完结的所谓的滑动门
  • js完结滑动触屏事件监听的法子

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:Js调整滑轮左右滑行实例,js滑轮滑动实例

关键词:

上一篇:没有了
下一篇:没有了