div超出可滚动，自动添加滚动条，自定义滚动条样式

于 2024-02-26 14:16:49 发布
阅读量1.4k 收藏 11
点赞数 14
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71854821/article/details/136295150
版权
本文介绍了如何在HTML/CSS中使用`overflow-y:scroll`和`::-webkit-scrollbar`伪元素来实现一个具有可定制样式的滚动条，包括宽度、背景颜色和悬停效果。
摘要由CSDN通过智能技术生成

先看一下最终的效果图吧：

父盒子：横向超出滚动：overflow-y: scroll;

              并且设置高度例：height: calc(100% - 36px);

.container {
	overflow-y: scroll;
	height: calc(100% - 36px);
}

自定义滚动条样式

.container::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-track {
	background-color: rgba(70, 166, 255, 0.1);
	display: none;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(70, 166, 255, 0.4);
	border: 2px solid transparent;
	border-radius: 6px;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

一个小菜逼
关注
  • 14
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
限制div高度当内容多了溢出时显示滚动条
09-25
主要介绍了如何限制div高度当内容多了溢出时显示滚动条，这个方法很实用，特别是在需要显示更多内容的时候，好了看看下面的示例
在DIV中设置内容超出后自动显示滚动条（可分别设置横向竖向是否展示）
最新发布
TC0221的博客
05-30 1343
利用overflow:auto属性实现侧边或者横向出现滚动条，也可以利用overflow-x:hidden设置横向滚动条隐藏或者overflow-y:hidden实现纵向滚动条隐藏，实现单边出现滚动条！
设置当内容超出div（文字长度超出div宽度或者长度）自动出现滚动条
weixin_51396911的博客
01-07 1539
内容必须在div中 div要设置宽高 overflow设置为auto overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条 div{ height: 401px; overflow: a..
内容超出div,设置滚动条
qq_46239275的博客
12-11 1万+
当内容超出div时,自动出现滚动条的条件: 1、内容必须在div中； 2、div要设置宽高； 3、overflow 设置 auto； 备注： 1、overflow:auto; 当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条； 2、overflow-x:auto; 当内容宽度超出div宽度，自动出现水平滚动条； 3、overflow-y:auto; 当内容宽度超出div高度，自动出现垂直滚动条； 注意： 设置好后会自动换行；
div内容超出自动滚动
莫逸雪的博客
05-24 5627
情况一： 1.要求：div内容超出自动滚动，鼠标进入停止滚动 2.效果： 3.代码（vue） <template> <div class='container'> <div ref="contentRef" class="content"> <div v-for="item in 20" :key="item" class="contentItem">{{item}}</div> </div&
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
海贼王某人的博客
05-11 1万+
先看一下最终的效果图吧： 第一种文字内容超出显示滚动条： 父盒子：横向超出滚动：overflow-x: scroll; .box { width: 100%; box-sizing: border-box; overflow-x: scroll; } 子盒子：内容不换行 white-space:nowrap; .item { white-space:nowrap; } 实现效果，超出滚动：如下图： 这个会发现即使内容没超出还是有滚动条占位如下图： 这里吧**overflow-x:
给div设置滚动条（css）
qq_66061193的博客
04-10 4454
如果要出现水平滚动条，则： overflow-x:auto。如果要垂直滚动条则为： overflow-y:auto。注意：一定要设置宽高。
div 滚动
Toml_的博客
06-09 6589
其中，::-webkit-scrollbar用于设置滚动条整体样式，::-webkit-scrollbar-thumb用于设置滚动条滑块样式。以上代码将滚动条宽度设置为 6px，高度设置为 6px，滑块圆角设置为 3px，滑块颜色设置为灰色半透明，滑块轨道颜色设置为浅灰色半透明。将overflow属性设置为auto或scroll，当内容超出div的高度或宽度时，就会出现滚动条。2.给div设置CSS属性overflow为auto或scroll，这将使div在高度范围内滚动。是你要选择的元素的类名。
（CSS学习记录）：定位(position)
baidu_41388533的博客
09-27 326
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26 目录 定位(position) CSS 布局的三种机制 为什么使用定位 定位详解 边偏移 定位模式 (position) 定位(position)的案例 定位(position)的扩展 绝对定位的盒子居中 盒子居中定位示意图 堆叠顺序（z-index） 定位改变display属性 综合演练 - 淘宝轮播图.
js固定DIV高度,超出部分自动添加滚动条的简单方法
10-27
在网页设计中，有时我们需要对某个元素，如`<div>`，设置固定的显示高度，并且当内容超过这个高度时，自动添加滚动条以便用户浏览所有信息。本文将详细讲解如何使用JavaScript实现这一功能，主要涉及的知识点包括...
利用div+jquery自定义滚动条样式的2种方法
01-21
本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
总的来说，通过CSS，我们可以实现自定义的`div`滚动条样式，不仅限于颜色，还可以调整大小、形状以及过渡效果，从而提升网页的用户体验和视觉效果。但为了保证兼容性，开发者应当同时使用旧的样式属性和新的伪元素...
html中设置让div中的内容超出后自动显示滚动条
09-28
关键在于 `overflow` 属性，将其设置为 "auto"，当内容超出该div的边界时，浏览器会自动添加水平或垂直滚动条： ```css .autoScroll { width: 300px; /* 与外层div宽度相同 */ height: 100px; /* 高度大于外层div...
div超出宽度或高度显示滚动条
这么多柠檬c
02-19 2万+
style="overflow:auto;" 一般使用：overflow:auto;这样在移动下有些超出的就可以进行滚动了。 效果： overflow 一共有5个属性。 1、overflow:auto；内容会被修剪，超出设置的宽高后会出现滚动条 2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置 3、overflow:visible;这个是默...
div 超出部分隐藏有滚动条
weixin_44828486的博客
12-08 1076
滚动条
css页面局部超出范围后展示滚动条并实现滚动效果
viva20的博客
06-20 2401
目的：当main-section区域不超出大小限制时；当main-section区域超出大小限制时，希望有滚动条展示并实现滚动效果。先看结构，页面是一个弹窗，弹窗分上下两部分。上部分为top-section，中间一根分割线，下部分为main-section。
DIV怎么自动添加滚动条？并给滚动条添加样式
m0_46652188的博客
07-14 9987
如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条 1.　div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底.
设置当内容超出div（文字长度超出div宽度）出现滚动条
热门推荐
XCMercy
01-15 5万+
当内容超出div时，自动出现滚动条的条件 内容必须在div中 div要设置宽高 overflow设置为auto 备注 overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度...
div设置横滚动条宽度
08-15
### 回答1： 可以通过设置CSS属性 `::-webkit-scrollbar` 来设置横滚动条的宽度。具体代码如下： ```css /* 设置横滚动条的宽度为10px */ ::-webkit-scrollbar { height: 10px; } ``` 需要注意的是，`::-webkit-scrollbar` 只在 Webkit 内核的浏览器中生效，如 Chrome、Safari 等。在其他浏览器中，可能需要使用不同的样式属性来设置横滚动条的宽度。 ### 回答2： 在使用div设置横滚动条宽度时，我们可以通过CSS样式来实现。 首先，我们需要为div设置一个固定的宽度，超出该宽度的内容将会被隐藏。 然后，我们可以使用overflow-x属性来控制横向滚动条的显示方式。这个属性有三个常用的取值： 1. overflow-x: hidden：表示不显示横向滚动条。当内容超出div的宽度时，内容将被隐藏，无法通过滚动条来查看。 2. overflow-x: scroll：表示始终显示横向滚动条，无论内容是否超出div的宽度。即使内容没有超出div的宽度，也会显示一个无效的滚动条。 3. overflow-x: auto：表示在内容超出div的宽度时显示横向滚动条，否则不显示。如果内容没有超出div的宽度，将不会显示滚动条。 接下来，我们可以使用CSS的属性来设置横向滚动条的宽度，可以使用scrollbar-width属性（适用于Chrome浏览器）或者-webkit-scrollbar属性（适用于Safari浏览器）来实现。 例如，我们可以使用以下代码来设置横向滚动条的宽度为10px： ```css div { width: 300px; /* 设置div的宽度为300px */ overflow-x: scroll; /* 显示横向滚动条 */ scrollbar-width: thin; /* 设置横向滚动条的宽度为10px */ } ``` 需要注意的是，不同浏览器对于滚动条的样式支持可能有所不同，因此最好使用浏览器兼容性较好的属性来设置滚动条的宽度。 ### 回答3： 在使用CSS的div元素中设置横滚动条宽度的方法有以下几种： 1. 通过CSS属性overflow-x来控制横向滚动条的显示和宽度。可以使用以下代码实现： ``` div { overflow-x: scroll; /* 横向滚动条显示 */ width: 300px; /* 设置div宽度 */ /* 可根据需要设置其他样式 */ } ``` 这样就会在div元素内容溢出时显示横向滚动条，并可以通过设置width属性来控制横向滚动条的宽度。 2. 使用CSS属性::-webkit-scrollbar来自定义滚动条样式。可以使用以下代码实现： ``` div { width: 300px; /* 设置div宽度 */ /* 可根据需要设置其他样式 */ } div::-webkit-scrollbar { width: 10px; /* 设置滚动条宽度 */ } div::-webkit-scrollbar-thumb { background-color: #888; /* 设置滚动条颜色 */ } div::-webkit-scrollbar-track { background-color: #eee; /* 设置滚动条背景色 */ } ``` 通过设置div::-webkit-scrollbar来定义滚动条的样式，通过设置width属性来控制滚动条的宽度。 总结来说，可以通过overflow-x属性来控制横向滚动条的显示和宽度，也可以通过自定义滚动条样式来控制滚动条宽度。以上两种方法根据具体需求选择适合的方法进行设置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值