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

时间: 2018-04-10阅读: 3627标签: 滚动

思路

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


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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

CSS让页面平滑滚动

在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的CSS reset都可以加上这么一条规则:凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

90行代码,15个元素实现无限滚动

在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看

js如何实现滚动到一定位置将内容固定在页面顶部

window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

CSS-界面滚动时不显示滚动条

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式,你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar — 整个滚动条.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

js将滚动条scrollbar保持在最顶/底部

在某些场景中,我们通常会遇到需要将滚动条保持在顶/底部,比如:在线客服聊天对话中,始终让聊天对话框保持在最底部使得能一直看到最新的聊天记录

原生JS实现滚动条

可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度;内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度)

css、js实现自定义滚动条的两种方式

一般默认的滚动条会比较丑,我们可以利用css或者js来实现实现自定义滚动条的功能; 下面就整理2种实现方式

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广