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

最新推荐文章于 2024-10-15 15:31:47 发布
最新推荐文章于 2024-10-15 15:31:47 发布
阅读量9.6k 收藏 1
点赞数
文章标签： div css 滚动 添加 滚动条 实现 纵向滚动条 自动
原文地址为： 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
关注
DIV实现纵向滚动条
知其所以然
12-05 9917
DIV实现纵向滚动条overflow-y:scroll的使用， 1.首先设置固定div的宽高 2.overflow-y:scroll 如果设置overflow:auto;表示当你内容超过div高度出现滚动条 overflow语法如下： overflow : visible | auto | hidden | scroll  参数：  visible :不剪切内容也不添加滚动条。假
手机html设纵向滚动条,html滚动条
weixin_34072734的博客
06-03 3241
手机评站网今天精心准备的是《html滚动条》，下面是详解！HTML滚动条的属性scrollbar，这个有哪些属性...scrollbar，这个有哪些属性1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．...
纯css实现文字超出自动滚动
最新发布
weixin_44177413的博客
10-15 469
其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。PS：里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器。
DIV 值添加纵向滚动条
吕飞技术专栏
10-09 3260
overflow-x:scroll是横的有 overflow-y:scroll是竖的有 overflow:scroll横竖有 overflow:hidden横竖都没有
给div添加滚动条
liucai1018的博客
10-22 8018
Demo： <!--记住宽和高一定要设置，否则不行--> <div style=" overflow-y:auto; overflow-x:auto;width:400px; height:400px;”></div> Demo说明： 1上面是对水平滚动条和垂直滚动条分别设置，可以直接替换为"overflow:auto" 2如果要单独设置水平滚...
div和table横向和纵向滚动条问题
09-20
同时，为了避免与表格内部的纵向滚动条冲突，`div`的`overflow-y`属性设置为`hidden`。此外，需要设置`div`的固定宽度，例如`1000px`，确保在`table`宽度超出时触发横向滚动。 然而，直接设置`table`的`width`属性...
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...
css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
09-22
或者，如果你想单独去掉横向或纵向滚动条： ```css div { overflow-x: hidden; /* 去掉横向滚动条 */ overflow-y: hidden; /* 去掉纵向滚动条 */ } ``` 在HTML中，你也可以直接在`<body>`标签上设置`scroll`属性...
jquery使用div实现滚动条效果
03-26
综上所述，通过jQuery我们可以轻松地在div元素上实现自定义的滚动条效果，结合CSS和JavaScript，可以创造出丰富的用户体验。同时，理解jQuery的源码和使用它作为开发工具，能够提升我们的前端开发能力。
css实现div自动添加滚动条(图片或文字等超出时显示)
09-25
css实现div自动添加滚动条比较实用的功能，当图片或文字超出div所规定的宽或高时，会自动出现滚动条，这一点还是比较有利于用户体验的，本文整理了一些实现自动滚动条的方法，感兴趣的朋友不妨参考下，或许对你认识css设置滚动条有所帮助
自定义的纵向滚动条自动定位
qq_40853132的博客
12-16 1573
纵向滚动条自动定位 import { Collapse, Select } from 'antd'; import React, { Component } from 'react'; const { Option } = Select; const { Panel } = Collapse; class index extends Component { state = { activeKey: '', contentList: [ '你好', '非常荣幸认
给div添加滚动条（转）
xinghuo0007的博客
06-01 1195
基础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 645
纯css实现完美决对居中 自动滚动条 根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc还剩3页未读，继续阅读下载文档到电脑，马上远离加班熬夜！亲，喜欢就下载吧，价低环保！内容要点：根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶* { margin:0； padding:0； list-style:none； font-size:14px；}/*---该 css...
html怎样自动出现垂直滚动条,HTML：如何为长段落创建仅具有垂直滚动条的DIV？...
weixin_30878051的博客
06-02 118
I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only verti...
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
css纵向滚动条
05-24
你可以通过CSS的`overflow-y`属性来给元素添加纵向滚动条，具体实现步骤如下： 1. 给包含内容的元素添加固定高度和`overflow-y: scroll`（意为在内容溢出时显示滚动条）样式。 ```css .scrollable { height: 300...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值