如何使用jQuery 消除网页的滚动条


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来如何使用jQuery 消除网页的滚动条,使用jQuery 消除网页的滚动条的注意事项有哪些,下面就是实战案例,一起来看一下。

网页有些时候需要能滚动的效果,但是不想要滚动条,我就遇到了这样的需求。自己用jq写了一个垂直滚动条。

纯css也可以实现

1

.box::-webkit-scrollbar{display:none}

但是edge和Firefox不兼容,自己想了一下只要监听滚轮事件,用jq写应该很简单,所以就自己写了一下。

原理:需要两个div,第一个就命名为box-wrap吧,它是一个外层的包裹,由于是垂直滚动,所以要固定高度,然后设置overflow:hidden,这样竖直方向超过高度的部分就会被隐藏

第二个div就是内容需要滚动的div,命名为box,采用绝对定位,在监听到鼠标滚轮事件后根据滚轮方向相对移动

css代码

1

2

3

4

5

6

7

8

9

10

11

12

#box-wrap{

                position: relative;

                width: 100% ;

                height: 500px ;

                overflow: hidden;

            }

            #box{

                position: absolute;

                width: 100% ;

                height: 1500px ;

                background: linear-gradient(blue,white) ;

            }

为了能演示效果,里面的盒子我写成了定高,并且让背景渐变,正常来讲可以高度auto让文字撑开就行了,样式的关键在于让父类relative之后再让子类absolute,这样子类就可以相对父类移动

js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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 || 0) / 3;

            var tempPos = parseInt(scrollEle.css('bottom')) ;

            console.log(tempPos) ;

            if(event.delta>0){

                if(tempPos>(-Max_dist)){

                    tempPos-step>(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;

                }

            }else{

                if(tempPos<0){

                    tempPos+step<0? tempPos = tempPos+step : tempPos = 0 ;

                }

            }

            //console.log(tempPos) ;

            scrollEle.css('bottom',tempPos) ;

        });

    }

    initScroll() ;

主要就是监听滚轮事件,从而判断滚轮的方向

1

event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;

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

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

demo代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<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 || 0) / 3;

            var tempPos = parseInt(scrollEle.css('bottom')) ;

            console.log(tempPos) ;

            if(event.delta>0){

                if(tempPos>(-Max_dist)){

                    tempPos-step>(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;

                }

            }else{

                if(tempPos<0){

                    tempPos+step<0? tempPos = tempPos+step : tempPos = 0 ;

                }

            }

            //console.log(tempPos) ;

            scrollEle.css('bottom',tempPos) ;

        });

    }

    initScroll() ;

    </script>

</html>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎么给span标记样式设置width属性

html与xhtml和xml有什么区别

iframe的子页面怎样操作父页屏蔽页面弹出层效果

HTML中定义多个class属性无效

怎样用按钮触发实现背景色的闪烁

以上就是如何使用jQuery 消除网页的滚动条的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

浅谈jQuery中将类数组对象转换为数组对象的方法

jQuery 怎么让a不跳转

jQuery为什么写入口函数

jQuery如何判断是否空对象

jQuery怎么判断节点是否存在?

jQuery让select不选中怎么实现

jQuery怎么禁用a标签

jQuery如何获取文件后缀

jQuery表示什么?

jQuery怎么设置区域不可操作

更多相关阅读请进入《jQuery》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...