zoukankan      html  css  js  c++  java
  • js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明

    js Code:

    <script>
    window.onload = function() {
        for (i = 0; i < 500; i++) {
            var x = document.createElement('div');
            x.innerHTML = "换行<br/>";
            document.body.appendChild(x);
        }
        function $(x) {
            return document.getElementById(x);
        };
        $("wrap").onmousewheel = function scrollWheel(e) {
            var sl;
            e = e || window.event;
            if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
                event.returnValue = false;
            } else {
                e.preventDefault();
            };
            if (e.wheelDelta) {
                sl = e.wheelDelta;
            } else if (e.detail) {
                sl = -e.detail;
            };
            if (sl < 0) {
                var x = parseInt($("he").innerHTML);
                x++;
                $("he").innerHTML = x;
            } else {
                var x = parseInt($("he").innerHTML);
                x--;
                $("he").innerHTML = x;
            };
        };
        if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
            //firefox支持onmousewheel
            addEventListener('DOMMouseScroll',
            function(e) {
                var obj = e.target;
                var onmousewheel;
                while (obj) {
                    onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
                    if (onmousewheel) break;
                    if (obj.tagName == 'BODY') break;
                    obj = obj.parentNode;
                };
                if (onmousewheel) {
                    if (e.preventDefault) e.preventDefault();
                        e.returnValue = false; //禁止页面滚动
                        if (typeof obj.onmousewheel != 'function') {
                        //将onmousewheel转换成function
                        eval('window._tmpFun = function(event){' + onmousewheel + '}');
                        obj.onmousewheel = window._tmpFun;
                        window._tmpFun = null;
                    };
                    // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
                    setTimeout(function() {
                        obj.onmousewheel(e);
                    },1);
                };
            },
            false);
        };
    }
    </script>
    <div id="wrap" style="position:absolute;left:100px;top:0px;background:#ccc;300px;height:300px;">
    <h1 id="he" style="text-align:center;100%;color:#f00;">0</h1>
    鼠标移动这里,转动滚轮,尽情的调戏吧!
    鼠标移出这里,转动滚轮,看看它的反应!
    </div>

    jquery code:
    前提:加载了jquery的mousewheel插件。
    代码如下:

    $(function(){
        $('.timeline').mousewheel(function (event, delta) {
            if (delta > 0) {
                $(this).css('backgroundColor', 'red');
            } else {
                $(this).css('backgroundColor', 'blue'); 
            }
            return false; //return false即可
        });
    })
  • 相关阅读:
    web中的懒加载
    数据库表的关系
    struts2的MVC模式
    servlet与tomcat的关系
    servlet解析
    解决Mac外接显示器字体模糊的问题
    insmod: ERROR: could not insert module dm-snapshot.ko: Unknown symbol in module
    linux ssh tunnel
    Permission denied (publickey,gssapi-keyex,gssapi-with-mic).错误的解决
    Best practices for a new Go developer
  • 原文地址:https://www.cnblogs.com/guangxiaoluo/p/3336964.html
Copyright © 2011-2022 走看看