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

纯css也可以实现

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

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

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

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

css代码

            #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代码

    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() ;

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

event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 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 || 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>

jq消除网页滚动条的更多相关文章

  1. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  2. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  3. js jq 获取网页元素宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  4. CSS定义网页滚动条

    (一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...

  5. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  6. Selenium2+python自动化-使用JS脚本处理网页滚动条

    内容来自:https://www.cnblogs.com/yoyoketang/p/6128655.html JS相关知识:http://www.w3school.com.cn/js/index.as ...

  7. 网页滚动条CSS样式

    滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条overflow: ...

  8. 纯JS自定义网页滚动条

    前言 由于最近在公司很忙,没什么时间更新,忙中抽时间做了一个JS滚动条,因为火狐浏览器与谷歌浏览器的滚动条自定义样式过于麻烦,所以我打算自己写个方便改样式的滚动条 CSS <style> ...

  9. jq判断页面滚动条进行样式修改

    $(window).scroll(function(){//窗口的滚动条 if($(window).scrollTop()>100){ //垂直滚动条钓offset 大于90时. $(" ...

随机推荐

  1. RPC和WebService的区别

    最近分析的这个系统,逻辑架构中有一层是RPC interface.之前对RPC不熟悉,就上网搜索了一下资料,在此总结一下: RPC是Remote Procedure Calling,远程过程调用的缩写 ...

  2. ConcurrentHashMap原理分析（1.7与1.8）-put和 get 需要执行两次Hash

    ConcurrentHashMap 与HashMap和Hashtable 最大的不同在于:put和 get 两次Hash到达指定的HashEntry,第一次hash到达Segment,第二次到达Seg ...

  3. 教你配置使用阿里云 Maven 库，体验秒下 jar 包的快感

    鉴于国内的网络环境,从默认 Maven 库下载 jar 包是非常的痛苦. 速度慢就不说了,还经常是下不下来,然后一运行就是各种 ClassNotFoundException,然后你得找到残留文件删掉重 ...

  4. 一个Vue实例-添加、显示列表、删除

    <link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" /> < ...

  5. 【数据库_Postgresql】sql语句添加序号，timestamp格式时间截取日期和时间

    SELECT ROW_NUMBER() OVER (ORDER BY sr.receiptid ASC) AS 序号, sr.receiptid, sr.receiptdate, DATE(sr.re ...

  6. BZOJ4890 Tjoi2017城市

    显然删掉的边肯定是直径上的边.考虑枚举删哪一条.然后考虑怎么连.显然新边应该满足其两端点在各自树中作为根能使树深度最小.只要线性求出这个东西就可以了,这与求树的重心的过程类似. #include< ...

  7. poj1958——Strange Towers of Hanoi

    The teacher points to the blackboard (Fig. 4) and says: "So here is the problem: There are thre ...

  8. [BZOJ4553][HEOI2016]序列 CDQ分治

    4553: [Tjoi2016&Heoi2016]序列 Time Limit: 20 Sec  Memory Limit: 128 MB Description 佳媛姐姐过生日的时候,她的小伙 ...

  9. 光荣之路测试开发面试linux考题之四：性能命令

    Hi,大家好我是tom,I am back.今天要给大家讲讲linux系统一些性能相关命令. 1.fdisk 磁盘管理 是一个强大的危险命令,所有涉及磁盘的操作都由该命令完成,包括:新增磁盘.增删改磁 ...

  10. C之Volatile关键字的介绍与使用20170724

    volatile 的意思是“易失的,易改变的”. 一.volatile的引入 这个限定词的含义是向编译器指明变量的内容可能会由于其他程序的修改而变化.通常在程序中申明了一个变量时,编译器会尽量把它存放 ...