码迷,mamicode.com
首页 > 移动开发 > 详细

横向滚动条 根据滚轮滚动而移动 制作 与 问题处理

时间:2015-02-13 16:25:33      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

今天做一个项目的时候要用到 ‘横向滚动条 根据滚轮滚动而移动’

上网上查了很多资料 

还找了一些插件 !  都不是很好用

 然后自己大概查了下资料 

找到一个大概比较靠谱的

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);

横向滚动条 根据滚轮滚动而移动 制作 与 问题处理

标签:

原文地址:http://www.cnblogs.com/hook-life/p/4290402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!