小知识:CSS 实现隐藏滚动条同时又可以滚动

终端端网页为的是更吻合原生植物的新体验,与否能暗藏快捷方式,与此同时又确保网页能慢速?

采用overflow:hidden暗藏快捷方式,但存有的难题是:网页或原素丧失了慢速的优点。虽然只须要相容终端应用领域程序(Chrome 和 Safari),只好想不到了自订快捷方式的伪第一类示例::-webkit-scrollbar

应用领域如下表所示 CSS 能暗藏快捷方式:

.element::-webkit-scrollbar {display:none}

假如要相容 PC 其它应用领域程序(IE、Firefox 等),欧美国家一名才人 John Kurlak 也科学研究出了一类配套措施。在罐子外边再冗余几层 overflow:hidden 外部文本再管制体积和外部冗余层那样,就隐性暗藏了。

......
.outer-container,.content { width: 200px; height: 200px; } .outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar { display: none; }

建站知识

小知识:CSS vertical-align 属性垂直对齐方式

2022-5-21 22:31:46

建站知识

小知识:基于原生Bootstrap carousel扩展的实用jQuery旋转木马,横向轮播

2022-5-21 22:42:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索