网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用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. WebService（二）

    使用eclipse开发webservice的服务器端以及客户端的简单实例 1.服务端 在eclipse中像建立一个web项目一样,new->Dynamic Web Project A.建一个需要 ...

  2. 1st 本周工作量及进度统计

    1. 项目:英文文章词频统计 项目类型:个人项目 项目完成情况:已完成 项目日期:2016.9.6 C(类别) C(内容) S(开始时间) ST(结束时间) I(耽误时间) △(实际时间) 分析 需求 ...

  3. RPM 方式安装 Oracle18c 的方法

    1. 云和恩墨公众号介绍了 18c 通过rpm方式的安装包. 所以需要先下载一下. 地址. https://www.oracle.com/technetwork/database/enterprise ...

  4. 转载：理解OAuth 2.0

    转载地址:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 作者: 阮一峰 日期: 2014年5月12日 OAuth是一个关于授权(autho ...

  5. sql 两列数据交换

    MSSQL的处理方法   update table1 set field_1 = field_2, field_2 = field_1 可是MySQL就不能这样写,不然一列会覆盖另一列记录   MyS ...

  6. jenkins配置slave节点 构建项目并执行操作

    1.新建与配置结点 [系统管理]-> [管理结点]-> [新建结点] 2.配置slave 说明: Name: 定义slave的唯一名称标识,可以是任意字符串,通常设置为slave主机名.i ...

  7. npm 安装 不快的解决办法

    npm config list  查看配置 npm config set prefix “c:\dev\nvm\npm”(配置用npm下载包时全局安装的包路径) npm install npm -g ...

  8. 树状数组模板（pascal） 洛谷P3374 【模板】树状数组1

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...

  9. 转---秒杀多线程第十四篇 读者写者问题继 读写锁SRWLock

    在<秒杀多线程第十一篇读者写者问题>文章中我们使用事件和一个记录读者个数的变量来解决读者写者问题.问题虽然得到了解决,但代码有点复杂.本篇将介绍一种新方法——读写锁SRWLock来解决这一 ...

  10. l洛谷 （水题）P4144 大河的序列

    题目戳 Solution: 这题前面都是废话,关键的一句就是本题求的是序列中连续一段的相与值(&)+相或值(|)最大,然后对这个值进行快速幂取模.考虑到两个数相与最大能得到的就是这两个数中的最 ...