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

最新推荐文章于 2024-05-30 18:55:27 发布
最新推荐文章于 2024-05-30 18:55:27 发布
阅读量1.2k 收藏 10
点赞数 13
文章标签： 前端 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);
}

一个小菜逼
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
设置当内容超出div（文字长度超出div宽度或者长度）自动出现滚动条
weixin_51396911的博客
01-07 1519
内容必须在div中 div要设置宽高 overflow设置为auto overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条 div{ height: 401px; overflow: a..
DIV怎么自动添加滚动条？并给滚动条添加样式
m0_46652188的博客
07-14 9960
如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条 1.　div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底.
在DIV中设置内容超出后自动显示滚动条（可分别设置横向竖向是否展示）
最新发布
TC0221的博客
05-30 681
利用overflow:auto属性实现侧边或者横向出现滚动条，也可以利用overflow-x:hidden设置横向滚动条隐藏或者overflow-y:hidden实现纵向滚动条隐藏，实现单边出现滚动条！
div内容超出自动滚动
莫逸雪的博客
05-24 5587
情况一： 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,设置滚动条
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自适应的高度超过预设的高度的时候出现滚动条的办法
weixin_33885253的博客
08-09 278
方法一：主要是 min-height:50px; max-height:200px;overflow: auto; <div id="ss" style="width:200px; border:1px solid #000000;min-height:50px; max-height:200px;overflow: auto;"> 方法二：三元运算符 $(func...
利用div+jquery自定义滚动条样式的2种方法
01-21
本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时...
html中设置让div中的内容超出后自动显示滚动条
09-28
关键在于 `overflow` 属性，将其设置为 "auto"，当内容超出该div的边界时，浏览器会自动添加水平或垂直滚动条： ```css .autoScroll { width: 300px; /* 与外层div宽度相同 */ height: 100px; /* 高度大于外层div...
自定义滚动条的样式
09-21
`malihu-custom-scrollbar-plugin-master` 是一个专门用于自定义滚动条样式的插件，它提供了丰富的定制选项，使得滚动条可以更好地融入到网站的设计风格中。 首先，让我们了解滚动条的基本构成。滚动条通常由两个...
javascript自定义滚动条实现代码
10-22
在自定义滚动条的过程中，我们关注的重点是如何控制这些元素的样式以及它们与内容区域的关系。 1. **滚动条高度和移动范围**： 滚动条的高度和可移动范围是根据内容区域的高度与可视区域高度计算出来的。如果内容...
限制div高度当内容多了溢出时显示滚动条
09-25
主要介绍了如何限制div高度当内容多了溢出时显示滚动条，这个方法很实用，特别是在需要显示更多内容的时候，好了看看下面的示例
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
11-23
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。 聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。 但同样的代码拿到我这里却完全失效，又仔细查了下资料说XHTML标准下scrollTop的值恒为0，解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop，讲了半天所解决的是整个页 面的滚动条。这个方法我是用不了了，因为不是框架结构，所以不可能用body的滚动条控制浏览信息。 网上关于这个问题的资料很少，连CSDN上也
利用div+jquery自定义滚动条
07-18
在这里，`div`可以作为我们需要自定义滚动条的容器，通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如，如果想让div在内容过多时显示横向滚动条，可以这样设置CSS样式： ```css div.scroll-container {...
设置当内容超出div（文字长度超出div宽度）出现滚动条
热门推荐
XCMercy
01-15 5万+
当内容超出div时，自动出现滚动条的条件 内容必须在div中 div要设置宽高 overflow设置为auto 备注 overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度...
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溢出设置滚动条
04-10 9119
    一般情况下，div子元素内容溢出后，想要设置滚动条，只需要将div的style中的overflow设置为auto。但今天遇到一个问题，发现设置后并没有效果。    最后发现子元素的position被设置为absolute，导致滚动条无效。    此时，只需要将div的position设置为relative。也就是说，若子元素position:absolute，想要使用overflow属性的...
div 滚动
Toml_的博客
06-09 6534
其中，::-webkit-scrollbar用于设置滚动条整体样式，::-webkit-scrollbar-thumb用于设置滚动条滑块样式。以上代码将滚动条宽度设置为 6px，高度设置为 6px，滑块圆角设置为 3px，滑块颜色设置为灰色半透明，滑块轨道颜色设置为浅灰色半透明。将overflow属性设置为auto或scroll，当内容超出div的高度或宽度时，就会出现滚动条。2.给div设置CSS属性overflow为auto或scroll，这将使div在高度范围内滚动。是你要选择的元素的类名。
如何让html的div内容溢出后显示滚动条
qq_33442546的博客
10-27 2万+
很多小伙伴会在写页面时有这样一个困扰，当div固定高度时导致里面的内容溢出，而影响了整体美观。
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、付费专栏及课程。

余额充值