盾怪网教程:是一个免费提供流行杀毒软件教程、在线学习分享的学习平台!

怎么使用jQuery 消除页面的滚动条

时间:2024/6/4作者:未知来源:盾怪网教程人气:

[摘要]0) / 3;这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上每次触发滚轮事件都会获取子类的...
0) / 3;

这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上

每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了

demo代码

<html>
    <head>
        <style>
            #box-wrap{
                position: relative;
                width: 100% ;
                height: 500px ;
                overflow: hidden;
            }
            #box{
                position: absolute;
                width: 100% ;
                height: 1500px ;
                background: linear-gradient(blue,white) ;
            }
        </style>
        <script src="./jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="box-wrap">
            <div id="box"></div>
        </div>
    </body>
    <script type="text/javascript">
    function initScroll(){
        //js模拟垂直滚轮滑动
        var scrollEle = $('#box') ;
        var scrollWrap = $('#box-wrap') ;
        var scrollSpd = 20 ;//滚轮滚动的速度
        var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离
        if(Max_dist<=0){
            return ;
        }
        scrollEle.css('bottom',-Max_dist) ;
        scrollEle.bind('mousewheel',function(event){
            var step = scrollSpd ;
            event.preventDefault() ;
            event = event.originalEvent ;
            //兼容firefox
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail 

关键词:如何运用jQuery 消除页面的滚动条




Copyright © 2012-2018 盾怪网教程(http://www.dunguai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版