zoukankan      html  css  js  c++  java
  • js 禁止|阻止滚动条滚动

    <!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>js javascript禁止滚动条滚动事件</title>
    <script type="text/javascript" src="control_scroll.js" ></script>
    </head>

    <body>
    <script>
    // 用于通过ID获取对象
    function $(x) { return document.getElementById(x); };

    //添加事件
    var addEvent = (function () {
    if (document.addEventListener) {
    return function (el, type, fn, capture) { el.addEventListener(type, fn, capture); };
    } else {
    return function (el, type, fn, capture) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }, capture); }
    }
    })();
    //添加鼠标滚动轮事件
    function addEventWheel(obj, fn ,useCapture){
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel";//FF doesn't recognize mousewheel as of FF3.x
    addEvent(obj, mousewheelevt, handler, useCapture);
    //初始化处理回调函数
    function handler(event) {
    var delta = 0;
    var event = window.event ||event ;
    var delta = event.detail ?-event.detail/3 : event.wheelDelta/120;
    if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }//禁止默认事件
    return fn.apply(obj, [event, delta]);//event事件对象 delta 滚动值
    }
    }


    window.onload = function() {
    // 创建换行,让body足够高
    for (i = 0; i < 500; i++) {
    var x = document.createElement('div');
    x.innerHTML = "换行<br/>";
    document.body.appendChild(x);
    }
    //添加鼠标滚动轮事件 随着滚动而改变值
    addEventWheel($("wrap"),function(e,delta){ $("he").innerHTML = parseInt($("he").innerHTML) + delta; },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>
    </body>
    </html>

  • 相关阅读:
    OkHttp3Stack volley
    Badge分析
    Android Icon数字角标(BadgeNumber)的实现方式
    Android ORMLite 框架的入门用法
    实现FlowLayout 自动排序标签
    iptables端口转发配置[Ubuntu]
    编译csipsimple的native部分
    开发JavaScript组件
    jQuery组件开发
    Groovy小结:java调用Groovy方法并传递参数
  • 原文地址:https://www.cnblogs.com/mengwei-ziyun/p/mw_js_controlScroll.html
Copyright © 2011-2022 走看看