css实现div自动添加纵向滚动条

最新推荐文章于 2025-09-15 11:47:20 发布
最新推荐文章于 2025-09-15 11:47:20 发布 · 9.7k 阅读 · 1
文章标签：

#div #css #滚动 #添加 #滚动条 #实现 #纵向滚动条 #自动

本文介绍如何使用CSS为div元素添加及自定义滚动条样式，包括多种颜色和风格的滚动条实例。
原文地址为： css实现div自动添加纵向滚动条

原来用过，没有太在意，最近又用到。记下方便以后用。

<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>

 

以下是更多滚动条样式：

 

<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
文字内容
</div>

<div style="WIDTH: 120; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
文字内容
</div>

转载请注明本文地址： css实现div自动添加纵向滚动条
xfxf996
关注
使用css优化页面横向/纵向滚动条样式
w13966597931的博客
04-14 3160
第一段是纵向的、第二段是横向的。如果横向纵向都要添加，那么，两个都复制即可。less要不要无所谓，要了就是仅在当前页面生效。
css实现div自动添加滚动条(图片或文字等超出时显示)
09-25
css实现div自动添加滚动条比较实用的功能，当图片或文字超出div所规定的宽或高时，会自动出现滚动条，这一点还是比较有利于用户体验的，本文整理了一些实现自动滚动条的方法，感兴趣的朋友不妨参考下，或许对你认识css设置滚动条有所帮助
CSS 滚动条样式自定义：从原理到实战，打造高颜值滚动体验
最新发布
qq_51145696的博客
09-15 1470
本文详解如何通过CSS自定义浏览器滚动条样式，提升页面视觉体验。核心内容包括：1. 浏览器兼容性处理（WebKit伪元素方案和Firefox标准属性）；2. WebKit滚动条的5个关键伪元素控制方法；3. 常用样式属性（尺寸、背景、圆角等）；4. 4种实用滚动条样式方案（简约、暗黑、细条、多彩），提供完整代码示例。最后强调无障碍设计原则，确保自定义滚动条兼顾美观与可用性。
DIV 值添加纵向滚动条
吕飞技术专栏
10-09 3320
overflow-x:scroll是横的有 overflow-y:scroll是竖的有 overflow:scroll横竖有 overflow:hidden横竖都没有
DIV实现纵向滚动条
热门推荐
知其所以然
12-05 1万+
DIV实现纵向滚动条overflow-y:scroll的使用， 1.首先设置固定div的宽高 2.overflow-y:scroll 如果设置overflow:auto;表示当你内容超过div高度出现滚动条 overflow语法如下： overflow : visible | auto | hidden | scroll  参数：  visible :不剪切内容也不添加滚动条。假
div和table横向和纵向滚动条问题
09-20
同时，为了避免与表格内部的纵向滚动条冲突，`div`的`overflow-y`属性设置为`hidden`。此外，需要设置`div`的固定宽度，例如`1000px`，确保在`table`宽度超出时触发横向滚动。 然而，直接设置`table`的`width`属性...
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...
div浮层,滚动条移动,位置保持不变的4种方法汇总
09-04
这里将介绍4种实现div浮层在滚动条移动时保持位置不变的方法。 **方法一：使用CSS绝对定位** 这是最基础的方法，通过CSS的`position: absolute;`属性来实现。当页面滚动时，设置了绝对定位的元素相对于最近的非...
css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
09-22
或者，如果你想单独去掉横向或纵向滚动条： ```css div { overflow-x: hidden; /* 去掉横向滚动条 */ overflow-y: hidden; /* 去掉纵向滚动条 */ } ``` 在HTML中，你也可以直接在`<body>`标签上设置`scroll`属性...
给div添加滚动条
liucai1018的博客
10-22 8153
Demo： <!--记住宽和高一定要设置，否则不行--> <div style=" overflow-y:auto; overflow-x:auto;width:400px; height:400px;”></div> Demo说明： 1上面是对水平滚动条和垂直滚动条分别设置，可以直接替换为"overflow:auto" 2如果要单独设置水平滚...
自定义的纵向滚动条自动定位
qq_40853132的博客
12-16 1669
纵向滚动条自动定位 import { Collapse, Select } from 'antd'; import React, { Component } from 'react'; const { Option } = Select; const { Panel } = Collapse; class index extends Component { state = { activeKey: '', contentList: [ '你好', '非常荣幸认
给div设置滚动条（css）
qq_66061193的博客
04-10 4972
如果要出现水平滚动条，则： overflow-x:auto。如果要垂直滚动条则为： overflow-y:auto。注意：一定要设置宽高。
给div添加滚动条（转）
xinghuo0007的博客
06-01 1235
基础css知识：overflow-y:scroll; 总是显示纵向滚动条 overflow-y:visible : 不剪切内容也不添加纵向滚动条 了解：overflow-y手册http://www.divcss5.com/shouce/c_overflowy.shtml overflow-x:scroll; 总是显示横向滚动条 overflow-x:visible : 不剪切内容也不添加横向滚动条
css纵向滚动条自适应,纯css实现完美决对居中 自动滚动条 根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
weixin_39979617的博客
08-03 699
纯css实现完美决对居中 自动滚动条 根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc还剩3页未读，继续阅读下载文档到电脑，马上远离加班熬夜！亲，喜欢就下载吧，价低环保！内容要点：根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶* { margin:0； padding:0； list-style:none； font-size:14px；}/*---该 css...
css：允许div纵向滚动
01-18
### CSS 实现 `div` 纵向滚动 为了实现一个 `div` 元素内的内容能够纵向滚动，可以利用 CSS 中的 `overflow` 属性来控制溢出的内容显示方式。当容器的高度固定且内部内容超出这个高度时，可以通过设置特定的 CSS 属性让其具备可滚动特性。 对于仅需垂直方向上的滚动效果而言，推荐使用 `overflow-y: auto;` 或者更严格的 `overflow-y: scroll;` 来确保即使内容未超过设定区域也会显示出滚动条[^3]。 下面是一个简单的例子展示如何创建具有纵向滚动功能的 `div`： ```css <style> .scrollable-div { border: 1px solid #ccc; padding: 8px; max-height: 200px; /* 设定最大高度 */ overflow-y: auto; /* 当内容超出了给定的最大高度，则启用Y轴滚动 */ } </style> <div class="scrollable-div"> <!-- 这里放置大量文本或其他HTML元素 --> <p>这里是一些占位符文本...</p> ... </div> ``` 此代码片段定义了一个名为 `.scrollable-div` 的类，它设置了边框、内边距以及最重要的两个属性——`max-height` 和 `overflow-y`。前者决定了该盒子能占据的空间大小；后者指定了只有当子级元素总高超过了父级所允许的最大值才会激活滚动机制。 此外，在某些情况下可能还需要考虑其他因素如浏览器兼容性和用户体验优化等问题。例如，如果想要更加平滑自然的感觉，可以在支持它的现代浏览器中加入 `-webkit-overflow-scrolling: touch;` 样式声明以获得惯性滚动效果（主要针对移动设备）。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值