网站推荐、资源下载等 | 个人网站

css设置滚动条并显示或隐藏

看效果,没有滚动条,超出div,开发中肯定不行。

 

有滚动条

 

 最后就是想隐藏滚动条

 

 

代码

有滚动条并显示

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body style="width:229px; height:203px; text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
 8     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
 9         <div class="inner-containe" style="width:229px; height:203px; overflow:auto;">
10             <li><span >overflow10</span></li>
11             <li><span >overflow11</span></li>
12             <li><span >overflow12</span></li>
13             <li><span >overflow13</span></li>
14             <li><span >overflow14</span></li>
15             <li><span >overflow15</span></li>
16             <li><span >overflow16</span></li>
17             <li><span >overflow17</span></li>
18             <li><span >overflow18</span></li>
19             <li><span >overflow19</span></li>
20             <li><span >overflow10</span></li>
21             <li><span >overflow11</span></li>
22             <li><span >overflow12</span></li>
23             <li><span >overflow13</span></li>
24             <li><span >overflow14</span></li>
25             <li><span >overflow15</span></li>
26             <li><span >overflow16</span></li>
27             <li><span >overflow17</span></li>
28             <li><span >overflow18</span></li>
29             <li><span >overflow19</span></li>
30             <li><span >overflow10</span></li>
31             <li><span >overflow11</span></li>
32             <li><span >overflow12</span></li>
33             <li><span >overflow13</span></li>
34             <li><span >overflow14</span></li>
35             <li><span >overflow15</span></li>
36             <li><span >overflow16</span></li>
37             <li><span >overflow17</span></li>
38             <li><span >overflow18</span></li>
39             <li><span >overflow19</span></li>
40             <li><span >overflow10</span></li>
41             <li><span >overflow11</span></li>
42             <li><span >overflow12</span></li>
43             <li><span >overflow13</span></li>
44             <li><span >overflow14</span></li>
45             <li><span >overflow15</span></li>
46             <li><span >overflow16</span></li>
47             <li><span >overflow17</span></li>
48             <li><span >overflow18</span></li>
49             <li><span >overflow19</span></li>
50         </div>
51     </div>
52 
53 </body>
54 </html>

 

有滚动但是隐藏

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .outer-container{
 8             width: 229px;
 9             height: 203px;
10             position: relative;
11             overflow: hidden;
12         }
13         .inner-containe{
14             position: absolute;
15             left: 0;
16             top: 0;
17             right: -17px;
18             bottom: 0;
19             overflow-x: hidden;
20             overflow-y: scroll;
21         }
22     </style>
23 </head>
24 <body style=" text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
25     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
26         <div class="inner-containe" >
27             <li><span >overflow10</span></li>
28             <li><span >overflow11</span></li>
29             <li><span >overflow12</span></li>
30             <li><span >overflow13</span></li>
31             <li><span >overflow14</span></li>
32             <li><span >overflow15</span></li>
33             <li><span >overflow16</span></li>
34             <li><span >overflow17</span></li>
35             <li><span >overflow18</span></li>
36             <li><span >overflow19</span></li>
37             <li><span >overflow10</span></li>
38             <li><span >overflow11</span></li>
39             <li><span >overflow12</span></li>
40             <li><span >overflow13</span></li>
41             <li><span >overflow14</span></li>
42             <li><span >overflow15</span></li>
43             <li><span >overflow16</span></li>
44             <li><span >overflow17</span></li>
45             <li><span >overflow18</span></li>
46             <li><span >overflow19</span></li>
47             <li><span >overflow10</span></li>
48             <li><span >overflow11</span></li>
49             <li><span >overflow12</span></li>
50             <li><span >overflow13</span></li>
51             <li><span >overflow14</span></li>
52             <li><span >overflow15</span></li>
53             <li><span >overflow16</span></li>
54             <li><span >overflow17</span></li>
55             <li><span >overflow18</span></li>
56             <li><span >overflow19</span></li>
57             <li><span >overflow10</span></li>
58             <li><span >overflow11</span></li>
59             <li><span >overflow12</span></li>
60             <li><span >overflow13</span></li>
61             <li><span >overflow14</span></li>
62             <li><span >overflow15</span></li>
63             <li><span >overflow16</span></li>
64             <li><span >overflow17</span></li>
65             <li><span >overflow18</span></li>
66             <li><span >overflow19</span></li>
67         </div>
68     </div>
69 
70 </body>
71 </html>

 

posted @ 2019-05-06 18:09  xiaostudy  阅读(15472)  评论(0编辑  收藏  举报
网站推荐
[理工最爱]小时百科 |  GitHub |  Gitee |  开源中国社区 |  牛客网 |  不学网论坛 |  r2coding |  冷熊简历 |  爱盘 |  零散坑 |  bootstrap中文网 |  vue.js官网教程 |  源码分享站 |  maven仓库 |  楼教主网站 |  廖雪峰网站 |  w3cschool |  在线API |  代码在线运行 |  [不学网]代码在线运行 |  JS在线运行 |  PHP中文网 |  深度开源eclipse插件 |  文字在线加密解密 |  菜鸟教程 |  慕课网 |  千图网 |  手册网 |  素材兔 |  盘多多 |  悦书PDF |  sumatra PDF |  calibre PDF |  Snipaste截图 |  shareX截图 |  vlc-media-player播放器 |  MCMusic player |  IDM下载器 |  格式工厂 |  插件网 |  谷歌浏览器插件 |  Crx搜搜 |  懒人在线计算器 |  leetcode算法题库 |  layer官网 |  layui官网 |  formSelects官网 |  Fly社区 |  程序员客栈 |  融云 |  华为云 |  阿里云 |  ztree官网API |  teamviewer官网 |  sonarlint官网 |  editormd |  pcmark10官网 |  crx4chrome官网 |  apipost官网 |  花生壳官网 |  serv-u官网 |  杀毒eset官网 |  分流抢票bypass官网 |  懒猴子CG代码生成器官网 |  IT猿网 |  natapp[内网穿透] |  ngrok[内网穿透] |  深蓝穿透[内网穿透] |  WakeMeOnLan[查看ip] |  iis7 |  [漏洞扫描]Dependency_Check官网 |  [图标UI]fontawesome官网 |  idea插件官网 |  路过图床官网 |  sha256在线解密 |  在线正则表达式测试 |  在线文件扫毒 |  KuangStudy | 
资源下载
电脑相关: Windows原装下载msdn我告诉你 |  U盘制作微PE工具官网下载 |  Linux_CentOS官网下载 |  Linux_Ubuntu官网下载 |  Linux_OpenSUSE官网下载 |  IE浏览器官网下载 |  firefox浏览器官网下载 |  百分浏览器官网下载 |  谷歌google浏览器历史版本下载 |  深度deepin系统官网下载 |  中兴新支点操作系统官网下载 |  文件对比工具Beyond Compare官网下载 |  开机启动程序startup-delayer官网下载 |  openoffice官网下载 |  utorrent官网下载 |  qbittorrent官网下载 |  cpu-z官网下载 |  蜘蛛校色仪displaycal官网下载 |  单文件制作greenone下载 |  win清理工具Advanced SystemCare官网下载 |  解压bandizip官网下载 |  内存检测工具memtest官网下载 |  磁盘坏道检测与修复DiskGenius官网下载 |  磁盘占用可视化SpaceSniffer官网下载 |  [磁盘可视化]WizTree官网下载 |  win快速定位文件Everything官网下载 |  文件定位listary官网下载 |  动图gifcam官网下载 |  7-Zip官网下载 |  磁盘分区工具diskgenius官网下载 |  CEB文件查看工具Apabi Reader官网下载 |  罗技鼠标options官网下载 |  [去除重复文件]doublekiller官网下载 | 
编程相关: ApacheServer官网下载 |  Apache官网下载 |  Git官网下载 |  Git高速下载 |  Jboss官网下载 |  Mysql官网下载 |  Mysql官网历史版本下载 |  NetBeans IDE官网下载 |  Spring官网下载 |  Nginx官网下载 |  Resin官网下载 |  Tomcat官网下载 |  jQuery历史版本下载 |  nosql官网下载 |  mongodb官网下载 |  mongodb_linux历史版本下载 |  mongodb客户端下载 |  VScode官网下载 |  cxf官网下载 |  maven官网下载 |  QT官网下载 |  SVN官网下载 |  SVN历史版本下载 |  nodeJS官网下载 |  oracle官网下载 |  jdk官网下载 |  STS官网下载 |  STS历史版本官网下载 |  vue官网下载 |  virtualbox官网下载 |  docker desktop官网下载 |  github desktop官网下载 |  EditPlus官网下载 |  zTree下载 |  layui官网下载 |  jqgrid官网下载 |  jqueryui官网下载 |  solr历史版本下载 |  solr分词器ik-analyzer-solr历史版本下载 |  zookeeper历史版本官网下载 |  nssm官网下载 |  elasticsearch官网下载 |  elasticsearch历史版本官网下载 |  redis官网下载 |  redis历史版本官网下载 |  redis的win版本下载 |  putty官网下载 |  查看svn密码TSvnPD官网下载 |  MongoDB连接工具Robo官网下载 |  dll查看exescope官网下载 |  dll2c官网下载 |  接口测试apipost官网下载 |  接口测试postman官网下载 |  原型设计工具AxureRP官网下载 |  canal官网下载 |  idea主题样式下载 |  vue的GitHub下载 |  finalShell官网下载 |  ETL工具kafka官网下载 |  cavaj[java反编译]官网下载 |  jd-gui[java反编译]官网下载 |  radmin[远程连接]官网下载 |  tcping[win ping端口]下载 |  jQueryUploadFile官网下载 |  RedisPlus下载 |  aiXcoder智能编程助手官网下载 |  [表单效验]validform官网下载 |  idea官网下载 |  RedisStudio下载 |  MD转word含公式pandoc官网下载 |  logviewer官网下载 |  Kafka官网下载 |  hbase高速下载 |  hadoop官网下载 |  hadooponwindows的GitHub下载 |  hive官网下载 |  soapui官网下载 |  flink官网下载 |  kafkatool官网下载 |  MinIO官网下载 |  MinIO中国镜像下载 | 
办公相关工具
免费在线拆分PDF【不超过30M】 |  免费在线PDF转Word【不超过10M】 |  在线文字识别转换【不超过1M】 |  PDF转换成Word【不超过50M】 |  在线OCR识别 |  Smallpdf |  文件转换器Convertio |  迅捷PDF转换器 |  字母大小写转换工具 |  档铺 |  快传airportal[可文字] |  快传-文叔叔 |  P2P-小鹿快传 |  [图床]ImgURL | 
网站入口
腾讯文档 |  有道云笔记网页版 |  为知笔记网页版 |  印象笔记网页版 |  蓝奏云 |  QQ邮箱 |  MindMaster在线思维导图 |  bilibili |  PDM文件在线打开 |  MPP文件在线打开 |  在线PS软件 |  在线WPS |  阿里云企业邮箱登陆入口 | 
其他
PDF转换 |  悦书PDF转换 |  手机号注册查询 |  Reg007 |  akmsg |  ip8_ip查询 |  ipip_ip查询 |  天体运行testtubegames |  测试帧率 |  在线网速测试 |