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

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

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

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

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

原生js实现新闻无间歇性上下滚动【无间歇文字滚动】

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。

H5中滚动到底部的事件

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

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。

background-attachement视差滚动

之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。

css修改浏览器默认滚动条样式

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码。这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好

原生JS实现图片滚动

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

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

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

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。

点击更多...

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