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即可
        });
    })
  • 相关阅读:
    HDU 1874 畅通工程续(dijkstra)
    HDU 2112 HDU Today (map函数,dijkstra最短路径)
    HDU 2680 Choose the best route(dijkstra)
    HDU 2066 一个人的旅行(最短路径,dijkstra)
    关于测评机,编译器,我有些话想说
    测评机的优化问题 时间控制
    CF Round410 D. Mike and distribution
    数字三角形2 (取模)
    CF Round410 C. Mike and gcd problem
    CF Round 423 D. High Load 星图(最优最简构建)
  • 原文地址:https://www.cnblogs.com/guangxiaoluo/p/3336964.html
Copyright © 2011-2022 走看看