今天做一个项目的时候要用到 ‘横向滚动条 根据滚轮滚动而移动’
上网上查了很多资料
还找了一些插件 ! 都不是很好用
然后自己大概查了下资料
找到一个大概比较靠谱的
HTML
<div style="width: 5000px;">test</div>
jQuery
$(function() { // 设置每次滚动长度,单位 px var scroll_width = 100; var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll"; $(document).on(scroll_events, function(e) { var delta = e.originalEvent.wheelDelta || e.originalEvent.detail; // 滑轮向下滚动,滚动条向右移动,scrollleft+ if(delta > 0) { $("html").scrollLeft($("html").scrollLeft() + scroll_width); } // 滑轮向上滚动,滚动条向座移动,scrollleft- else { $("html").scrollLeft($("html").scrollLeft() - scroll_width); } }); });
Javascript
window.onload = function() { // 监听鼠标滑轮 var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; if(document.attachEvent) { document.attachEvent("on" + mousewheelevt, function(e){ mousewheel_event(e.wheelDelta); }); } else if(document.addEventListener) { document.addEventListener(mousewheelevt, function(e){ mousewheel_event(e.detail); }, false); } // 设置每次滚动长度,单位 px var scroll_width = 100; function mousewheel_event(delta) { // 滑轮向下滚动,滚动条向右移动,scrollleft+ if(delta > 0) { document.getElementsByTagName("html")[0].scrollLeft += scroll_width; } // 滑轮向上滚动,滚动条向座移动,scrollleft- else { document.getElementsByTagName("html")[0].scrollLeft -= scroll_width; } } };
参考资料:http://zhidao.baidu.com/link?url=Yp2GVSsADxq1T2dox5iDha0XDEl5k7RSSiffCLGg9dmxSjRXtdKLLdwreSxVo8uOK1YrQUyvoU9p-ssoRpC2f_
jquery的方法我尝试了一下 发现在IE ok 在Chrome 下并不能 正常执行
我查找了下原因
发现chrome 下
$("html").scrollLeft()
永远为0
在国内找不解决方法 就去
http://stackoverflow.com/ 找了一下 关键词:chrome scrollLeft
果然找到一篇文章
http://stackoverflow.com/questions/13927430/html-scrollleftvalue-not-working-in-chrome
原来chrome 中不能使用
$("html").scrollLeft() 而需要 $(window).scrollLeft(100);
时间: 2024-10-13 00:12:50