html页面中为层(div)元素加滚动条

最新推荐文章于 2023-04-21 22:55:31 发布
最新推荐文章于 2023-04-21 22:55:31 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： webPage design


Html代码   收藏代码
  1. <html>  
  2.     <head>  
  3.     <title>Div Scroll</title>  
  4.       
  5.     <style type="text/css">  
  6.     .scroll {  
  7.         width: 50%;                                     /*宽度*/  
  8.         height: 200px;                                  /*高度*/  
  9.         color: ;                                        /*颜色*/  
  10.         font-family: ;                                  /*字体*/  
  11.         padding-left: 10px;                             /*层内左边距*/  
  12.         padding-right: 10px;                            /*层内右边距*/  
  13.         padding-top: 10px;                              /*层内上边距*/  
  14.         padding-bottom: 10px;                           /*层内下边距*/  
  15.         overflow-x: scroll;                             /*横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS文档)*/  
  16.         overflow-y: scroll;                             /*竖向滚动条*/  
  17.           
  18.         scrollbar-face-color: #D4D4D4;                  /*滚动条滑块颜色*/  
  19.         scrollbar-hightlight-color: #ffffff;                /*滚动条3D界面的亮边颜色*/  
  20.         scrollbar-shadow-color: #919192;                    /*滚动条3D界面的暗边颜色*/  
  21.         scrollbar-3dlight-color: #ffffff;               /*滚动条亮边框颜色*/  
  22.         scrollbar-arrow-color: #919192;                 /*箭头颜色*/  
  23.         scrollbar-track-color: #ffffff;                 /*滚动条底色*/  
  24.         scrollbar-darkshadow-color: #ffffff;                /*滚动条暗边框颜色*/  
  25.     }  
  26.     </style>  
  27.       
  28.     </head>  
  29.       
  30.     <body>  
  31.     <div align="center">  
  32.         <div class="scroll">  
  33.             <!--在此添加想要显示的内容 -->  
  34.         </div>  
  35.     </div>  
  36.       
  37.     </body>  
  38. </html>  

 


CollectDew
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为div添加滚动条.html
04-16
为div添加滚动条 html 欢迎下载
滚动楼层导航html,模仿楼层滚动.html
weixin_42298093的博客
06-07 255
Document*{margin: 0;padding: 0;list-style: none;}html,body{width: 100%;height: 100%;}.main{width: 800px;height: 100%;margin: 0 auto;}.main li{width: 800px;height: 500px;margin-bottom:158px;font-size: ...
如何在HTML5页面中使用鼠标滚轮事件
张函
12-25 1万+
滚动的事件很神奇，想了解他的神奇就来这里看吧
div 滚动条
lqi
10-24 122
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
HTML如何给页面设置滚动条 (简单，通俗易懂)
m0_60237095的博客
03-20 1万+
如何给页面设置滚动条
jsp中为表格添加水平滚动条的方法
10-21
以下是一个详细的步骤来解释如何在jsp中为表格添加水平滚动条。 1. **HTML表格基础**： 首先，我们需要创建一个基本的HTML表格。表格由`<table>`标签定义，`<tr>`标签用于创建行，`<th>`用于定义表头，而`<td>`...
html中设置让div中的内容超出后自动显示滚动条
09-28
在HTML中，我们经常遇到需要限制某个容器（如div）大小，但又希望其内容能完全显示，这时就需要使用滚动条。本文将详细介绍如何在HTML中设置div，使其内容超出后自动显示滚动条。 首先，我们需要创建一个div元素，...
jsp中为表格添加水平滚动条的实现方法
01-08
bootsrtap自适应是针对当浏览器不占满整个屏幕，而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候，如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果，横向并不会出现滚动条 查看网上的...
【HTML】美化滚动条 | 在div中添加右侧滚动条
weixin_45968070的博客
04-21 2091
要只添加右侧滚动条，可以使用CSS中的overflow-x属性来限制水平方向上的溢出，并使用overflow-y: hidden来隐藏垂直方向上的溢出。美化滚动条可以使用CSS中的::-webkit-scrollbar伪元素，该伪元素允许我们自定义滚动条的样式，如颜色、宽度等。/* 直接隐藏滚动条 */
【JSP笔记】嵌套div的页面滚动
JOY_TIGER的博客
06-13 536
实现div滚动自己总结的注意事项，主要留个档自己好看，欢迎学习讨论
html区域滚动原理,html的局部滚动和全局滚动
weixin_29534399的博客
05-30 1638
前端开发人员，肯定会遇到过，局部滚动的问题。在微信上，顶部会有一个地址栏。很多时候我们做单屏的页面，是不需要这个全局滚动。但是禁用了全局滚动，往往会导致局部滚动也无法使用。示例这时候我们可以通过绝对定位，将这个问题解决。或者是禁用整个外层的滚动事件。#app {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;}这种方式虽然能解...
html怎么在网页中加滚动条,在html中如何加滚动条？滚动条的用法！
weixin_39806388的博客
06-03 5485
随着经济和科技的发展，互联网的大趋势造就了很大的就业机会，而且在我们日常的生活中大家多多少少会去浏览一些网站和网页吧！那么今天呀，我们就来说说在html中如何加滚动条？和一些有关于滚动条的用法！的经验分享！1.首先我们打开我们的前端的开发工具新建一个 .html 文件即可，代码如下：滚动条W3cshool，一款可以让大家免费编程学习的平台。在代码完成后进行预览，我们发现这个代码生成的一个结果是没有...
div:给div加滚动条　div的滚动条设置
热门推荐
晴朗_Raymond
04-13 21万+
<br />今天做了个例子：<br />div 的滚动条问题：<br />两种方法：<br />一、<br /><div style=" overflow:scroll; width:400px; height:400px;”></div><br />记住宽和高一定要设置噢，否则不成的<br /><br />不过在不超出时，会有下面的滚动条，所以不是最好的选择<br /> <br />二、<br /><div style=" overflow-y:auto; overflow-x:auto; width:4
HTML中的div添加滚动条
mingzi1245的博客
05-18 578
第一种：宽和高一定要设置，否则无法显示 <div style=" overflow:scroll; width:400px; height:400px;"></div> 第二种：宽和高一定要设置，否则无法显示 <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;"></div> 比较： 第一种高度宽度在不超出时，会有下面的滚动条。 第一种高度.
页面滚动条样式修改
qq_32578989的博客
06-21 1199
全局的样式文件中添加重置滚动条样式代码： /* 滚动条整体样式 */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* 滚动条里面小方块 */ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } 样式图片： /*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚.
前端页面加入滚动条
migexiaoliang的博客
10-29 1670
前端页面加入滚动条。
html如何在滚动条里面添加固定div,【div】给div添加滚动条
weixin_29479087的博客
07-08 603
div添加滚动条常见属性由于页面上的表里的末一列的内容太多,显示的内容不美观了,就想在这一列上加滚动条,在网上搜了一下,用div可以实现,感觉还不错,下面的是在网上查到的. 想在div里添加滚动条设置一下style就ok了 ...给div添加滚动条最简单的方法: 启用div作为编辑器 添加contentEditalbe属性1.自从HTML5中新引入了contentEditalbe属性以后,div...
在页面局部div设置滚动条
qq_31275085的博客
09-02 2218
.conten-over{ overflow: hidden; overflow-y: scroll; white-space: nowrap; height:100%; width:100%; } .conten-over::-webkit-scrollbar { width: 0; } <div class="conten-over"&g...
滚动条标签名要在body里面写div么
最新发布
06-10
例如，我们可以在`body`里面定义一个`div`元素，用来作为滚动条容器： ``` <div class="scroll-container"> <!-- 这里是页面内容 --> </div> ``` 然后，在CSS中为这个容器设置滚动条样式，例如： ``` ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值