js+css 实现 滚动条滑动时显示,不滑动时隐藏

更新日期: 2018-04-10阅读量: 5132标签: 滚动

思路

把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。


html

 <body>
    <div id='wrapper'>
       ...
       ...
    </div>
 </body>


css

body{ 
/* 隐藏原有的滚动条 */ 
overflow: hidden; 
} 
#wrapper{ 
width: 1940px; /* 宽度,通常浏览页面是1920px ,根据实际状况做调整,通常滚动条为20px,大于20即可隐藏 */ 
height: 1000px; 
overflow-y: scroll; /* 创建新的滚动条*/ 
padding-right: 20px; /* 滚动条右边距 */ 
}


js

var topValue = 0
interval = null;// 定时器  
jQuery('#wrapper').scroll(function(){  
             if(interval == null){// 未发起时,启动定时器,1秒1执行  
                   interval = setInterval(function(){
                 // 判断是否滚动
                if(jQuery('#wrapper').scrollTop()== topValue){    
                       clearInterval(interval);  
                       interval = null;  
                       // 没有滚动,则隐藏,padding边距,根据开发状况修改,此处是为了,不影响之前的css,width同理,通常是1940px,达到滚动条隐藏效果
                       jQuery("#wrapper").css({width:'1940px',padding:'0px 20px 0px 0px'})                  
                      }
                   }, 1000); 
             }
            topValue = jQuery('#wrapper').scrollTop(); 
            //滚动,则显示,padding边距,根据开发状况修改,此处是为了,不影响之前的css,width同理,通常是1940px,达到滚动条隐藏效果   
         jQuery("#wrapper").css({width:'1920px',padding:'0px 0px 0px 0px'})
        });   


转载来源:https://blog.csdn.net/qq_21570029/article/details/79865478


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/614

js中scroll滚动

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。这四个属性,全部是只读属性,其中,无非就是分为宽高和左上。两个方向。

html页面滚动加载,可视区域判断

一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色

如何用js制作滚动文字?

有时候需要展示的文字较多,但是空间较少,为了能充分的利用空间,可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

使用CSS实现无滚动条滚动

我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?

jquery扩展方法:实现模拟Marquee无限循环滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于jquery的扩展

js禁止页面滚动

发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看

解决多个window.onscroll覆盖的问题

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业务逻辑,这是该怎么做呢?

BetterScroll移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。

js获取滚动条位置

在前端项目开发中,页面的滚动条是经常出现的,那么js如何获取滚动条位置呢?pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

js判断页面到底部

用js判断html页面是否滚动到最底部了,当页面到达底部时候触发加载数据的操作,实现思路:window加上一个滚动监听,然后再判断滚动条是否到达底部,下面是代码的实现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!