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

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

通过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来实现隐藏滚动条。


CSS:scroll-snap滚动事件停止及元素位置检测

CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现

原生JS实现图片滚动

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

css虚线边框滚动效果

常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。

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

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

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

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

vue使用keep-alive保持滚动条位置的实现

简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置。事实上,就算不使用keep-alive,位置也没有被记录。但是,在不使用keep-alive的时候,页面内容会刷新,所以就随他去了……就是这么任性……

js禁止页面滚动

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

实现移动端信息无缝滚动

这篇文章主要教大家如何简单实现js无缝滚动效果。这种实例在网页中其实还挺常见的。注意:内容的高度必须大于容器的高度,否则无法滚动

使用elementUI滚动条之横向滚动

这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

CSS让页面平滑滚动

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

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

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

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