html自定义滚动条样式「必看:div滚动条设置方法」

哈喽,小伙伴们大家好,今天许瑞林废话就不多说了,直接上干货,标题:html自定义滚动条样式,div滚动条设置方法,以及关于内容,浏览器,情况等等各种相关干货,希望你认真看完这篇文章后,能充分理解我想表达的意思。相信你很快就能掌握!你离大牛越来越近了!

溢出滚动讲起

Web 开发中,经常遇到需要固定容器大小,然后内部内容超出的情况,相信非技术的也经常会遇到这样的场景,没错,几乎打开任何一个门户网站你使用鼠标滚轮就属于上面的情况。

解决方案自然就是 overflow 这个 CSS 属性。

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

效果如下:CSS 自定义滚动条和强制显示

visible

上面是 visible。CSS 自定义滚动条和强制显示

hidden

上面是 hidden。CSS 自定义滚动条和强制显示

scroll 与 auto

上面是 scroll 与 auto。

注意,Chrome 系列浏览器都会自动隐藏滚动条,不论设置 auto 还是 scroll。

因此我们才有今天的话题。

inherit 就不举例了,这个与父元素有关。

强制显示滚动条

首先,scroll 说好的显示,被浏览器给搞掉了。

其次,隐藏是好事毕竟占位置,而且当今的网民基本都本能的知道滚动操作。

最后,个人举四肢赞成自动隐藏。

但是!!!

你总会遇到不怎么上网的网民,在看不到内容时候不知所措。

亦或者,你遇到的坑爹的老板,就是要让你显示(这个老板可能不怎么上网……)。

或者你们产品设计对象就是一些非网民的使用。

又或者你们设计觉得有个自定义滚动条好看。

等等等等情况,相信我,你一定会遇到这个情况的。

于是我们需要定制一个滚动条,放心,CSS 伪类已经给你提供好了。

核心代码由 Steven Lewis:
https://codepen.io/stevenlewis/pen/hubpL 提供,本人用到,精简下顺便搬运。

Foo
Bar
Baz
Help I'm trapped in an HTML factory!

上面是 HTML 代码。

frame {
 overflow-y: auto;
 border: 1px solid black;
 height: 3em;
 width: 10em;
 line-height: 1em;
}
.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
 width: 11px;
}
.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid white;
 background-color: rgba(0, 0, 0, .5);
}

这里是对应的 CSS 代码。

做了对比动图,大家看一下:CSS 自定义滚动条和强制显示

auto 或 scroll

上面是 auto(或 scroll)控制,细节是右边的滚动条会自动隐藏。CSS 自定义滚动条和强制显示

定制

上面是经过定制的,所以不会隐藏。

.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}

隐藏默认的滚动条。

.frame::-webkit-scrollbar:vertical {
 width: 11px;
}

设置垂直滚动条宽度。

当然也有水平滚动条配置,
.frame::-webkit-scrollbar:horizontal,那么就要设置他的高度的。如下:

.frame::-webkit-scrollbar:horizontal {
 height: 11px;
}

.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid red;
 background-color: rgba(0, 0, 0, .5);
}

滚动条的其他样式定制,注意,这个一定也要定制,否则就是一个透明的滚动条……


OK,建议没有用过或者忘了的小伙伴保存一下,一定会再次用到的。

这上面就是整篇文章的所有内容了,希望能帮助到你,认认真真、仔细看完了html自定义滚动条样式「必看:div滚动条设置方法」,觉得收获很多知识,那就点个赞吧!赠人玫瑰有留余香!

本文发布者:万事通,不代表寂寞网立场,转载请注明出处:https://www.jimowang.com/p/6907.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 jimowangmail@126.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年9月22日 15:45
下一篇 2022年9月22日 15:47

相关推荐

  • 罗翔在新东方当过三年老师,新东方开司法培训课主讲老师

    大家好,我是本站的消息分析员钱红艳,用数据和分析为您呈现最新的资讯,近来,罗翔在新东方当过三年老师,新东方开司法培训课主讲老师引起了人们的广泛关注和讨论,成为了网络热门话题之一。接下来,请跟随我一起了解这个事件的详细情况,揭开它的谜团! 4 月 20 日,俞敏洪在东方甄选直播间表示,罗翔当初曾在新东方当过 3 年老师。 俞敏洪称:” 罗翔实际上,…

    2023年4月22日
  • 年轻人为什么越来越反感“专家” 最新专家奇葩建议

    小伙伴们大家好,今天博辰要和大家一起探讨一下年轻人为什么越来越反感“专家”,专家奇葩建议的问题,还有专家,年轻人,建议,奇葩,工作的一些实用干货和最新内容分享,在这篇文章中,我会为初学者提供一些学习的方法和技巧,希望能够帮助你更好地学习。 最近,专家又开始对年轻人发表建议了。专家对年轻人的建议越来越多,年轻人也越来越反感专家,“年轻人为什么不爱听专家建议”、…

    2023年5月15日
  • 指甲可以做什么药「最新指甲可以入药吗」

    很高兴又和大家见面了,今天王恩琦来和大家聊一聊指甲可以做什么药,指甲可以入药吗,以及指甲,手指甲,什么药,中医,药店的相关内容干货,成功的路上不会一帆风顺,每一个成功的背后都有一个惊人的故事。 在我们身边,有一些孩子,我特别喜欢啃指甲,这时候一般都是家长出面制止。因为在大家眼里,这个指甲脏了,不干净。如果我告诉你,人家的指甲也是一味的中医,你相信吗? 在大家…

    2023年2月11日 自媒体
  • 淘宝店铺优惠券怎么设置「推荐手把手教你设置优惠券的方法」

    很高兴又和各位见面啦!这次郑琨想和你们聊聊淘宝店铺优惠券怎么设置,手把手教你设置优惠券的方法,以及关于优惠券,商家,店铺等等一系列的相关事项,认真阅读完,把我想表达的思路完全理解,相信你很快就可以掌握! 现在的淘宝商家越来越多,同行之间的竞争非常激烈。很多的商家都希望通过设置优惠劵来做一些活动,来刺激一些用户的购买,使之间的宝贝能够排名在第一名。淘宝商家设置…

    2022年11月22日
  • Selina恨俞灏明「秒懂:selina和俞灏明谁伤的重」

    小伙伴们大家好,今天李月娥抽了个时间整理了一些关于Selina恨俞灏明,selina和俞灏明谁伤的重,还有关于群众,情侣,烧伤,情况,多年这些的精品干货文章,其实这个内容对于新手来说还是挺重要的,因为涉及面很大。如果你认真读了,一定会有所收获! 前段时间陈翔和毛晓彤分手的事情在网上闹得沸沸扬扬的,群众关注度也都高到了一个点,还好有鹿晗关晓彤出来仗义相救,不然…

    2023年2月18日 自媒体
  • 95后寿衣模特回应被说阴气重:坚持做自己

    大家好,我是本站的消息分析员李沛雯,用数据和分析为您呈现最新的资讯,近来,95后寿衣模特回应被说阴气重:坚持做自己成为了网络上热门的讨论话题,吸引了大量网友的关注,让我们一同深入探究这个事件的各个方面,看看究竟发生了什么吧! 两年前,95后寿衣模特任赛男火了。她在郑州一家淘宝店做寿衣模特,因被媒体报道登上微博热搜第一,受到广泛关注。出圈后除了光环也带来困扰,…

    2023年4月5日