关闭

css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

时间: 2017-11-27阅读: 2120标签: 滚动

通过css方法隐藏滚动条,目前只支持webkit内核的浏览器,当然如果是移动开发,基本都是兼容移动端的浏览器的(基本都是webkit内核的)。

html:

<div class="demo">
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

css:

.demo{
	width: 50px;height: 50px;background: #F0AD4E;
	overflow: auto;
}
::-webkit-scrollbar{
    display:none;
}

核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0,如下:

::-webkit-scrollbar{
	width:0px;
}

上面代码是针对所有的滚动条,如果只针对当前demo。css样式应该写为:.demo::-webkit-scrollbar{display:none;}。如果要考虑兼容性,可以结合js来实现隐藏滚动条。


站长推荐

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

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

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

关闭

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

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

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

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

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

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

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

前端高性能滚动 scroll 及页面渲染优化

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了

原生JS实现图片滚动

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

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

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

js实现单张或多张图片持续无缝滚动

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。

Js获取滚动的头部距离和左边距离

Js获取滚动的头部距离和左边距离:在js中,经常会用到需要获取头部距离和左边距离的小功能,在这里封装一下,以后可以直接调用即可:

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

点击更多...

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