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

    1.XPATH使用方法 使用XPATH有如下几种方法定位元素(相比CSS选择器,方法稍微多一点): a.通过绝对路径定位元素(不推荐!) WebElement ele = driver.findEle ...

  2. 西南大学校园网客户端共享网络之路由器开wifi

    1年前出了NetKeeper,让寝室只能一个人用一个账号,而且,在寝室平板手机什么的只能靠360wifi什么的来维持了,电脑一直不能关,确实让人不爽. 最近学校又出台了swu-wifi-dorm来让寝 ...

  3. 使用salt-cloud创建虚拟机

    salt-cloud也是基于openstack来做的,它可以支持多种云的使用.比如:Aliyun.Azure.DigitalOcean.EC2.Google Compute Engine.HP Clo ...

  4. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  5. [Code Festival 2017 qual A] C: Palindromic Matrix

    题意 给出一个小写字母组成的字符矩阵,问能否通过重排其中的字符使得每行每列都是回文串. 分析 简化版:给出一个字符串,问能否通过重排其中的字符使得它是回文串.那么如果字符串长度为偶数,就需要a到z的个 ...

  6. 【Luogu1912】【NOI2009】诗人小G（动态规划）

    [Luogu1912][NOI2009]诗人小G(动态规划) 题面 洛谷 题解 原来\(NOI\)这么多神仙题... 考虑一个极其明显的\(dp\) 设\(f[i]\)表示前\(i\)个句子产生的最小 ...

  7. 【CF700E】Cool Slogans（后缀自动机）

    [CF700E]Cool Slogans(后缀自动机) 题面 洛谷 CodeForces 题解 构建后缀自动机,求出后缀树 现在有个比较明显的\(dp\) 设\(f[i]\)表示从上而下到达当前点能够 ...

  8. ZJOI 2017 二试 day0

    2017.4.25 话说4.24怒订正了6题,早上大扫除,把校服弄脏了too sad 中午从二中出发,只2个小时不到就抵达宾馆,开始先在大厅等候了半天(分配房间),和一试差不多.只是这个宾馆要远优于“ ...

  9. Native Wifi API

    原文链接地址:https://www.cnblogs.com/jackcin/p/3285357.html 在windows平台下,可以使用native wifi api来控制无线网卡,包括获取无线网 ...

  10. A2W W2A等所需要的文件

    1.包含头文件 #include <atlbase.h> #include <atlconv.h> 2.在使用前加上,注意,不是在文件都定义. USES_CONVERSION;