网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用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. 软工网络15团队作业4-DAY2

    每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 张陈东芳:查看数据库的连接 吴敏烽:规范商品实体类 周汉麟:研究获取商品信息的方法 林振斌:研究获取商 ...

  2. 《高性能JavaScript》学习笔记(2)——日更中

    我说日更就日更,接着....今天从缓冲布局信息开始啦! -------------------2016-7-22 21:09:12------------------------------- 14. ...

  3. 微信获取 openid 静默及非静默

    <?php /* 需要的微信公众号配置信息 APPID : 绑定支付的APPID APPSECRET : 公众帐号secert */ class Index { // 配置账号信息 privat ...

  4. 【Linux 命令】- find 命令

    find 是日常工具箱中功能更强大.更灵活的命令行工具之一,因此值得花费更多的时间. 最简单的,find 跟上路径寻找一些东西.例如: find / 它将找到(并打印出)系统中的每个文件.而且由于一切 ...

  5. c 用指针操作结构体数组

    重点:指针自加,指向下一个结构体数组单元 #include <stdio.h> #include <stdlib.h> #include <string.h> #d ...

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

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

  7. PictureBox使用异常

    PictureBox的使用 代码: 显示部分 当我切换不同位置之间的照片时,出现这种问题: 但是当我代码改成下面的代码时,则错误消除 但我并不清楚原因

  8. vue & $data & data

    vue & $data & data vm.a === vm.$data.a https://vuejs.org/v2/api/#data https://flaviocopes.co ...

  9. Checkbox & Excel

    Checkbox & Excel Q: Excel how to check checkbox? 这个怎么打勾✔ ? A: 可以打勾的 How to Insert and Use a Chec ...

  10. Flume日志收集系统架构详解--转

     2017-09-06 朱洁 大数据和云计算技术 任何一个生产系统在运行过程中都会产生大量的日志,日志往往隐藏了很多有价值的信息.在没有分析方法之前,这些日志存储一段时间后就会被清理.随着技术的发展和 ...