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>

原文地址：https://www.cnblogs.com/xiaostudy/p/10821191.html

时间： 2024-11-06 09:29:36

css设置滚动条并显示或隐藏的相关文章

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 1 div { 2 scrollbar-face-color: #fcfcfc; 3 scrollbar-highlight-color: #6c6c90; 4 scrollbar-shadow-color: #fcfcfc; 5 scrollbar-3dlight-color:

转载自前端开发：CSS设置滚动条样式

浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是用div模拟的,结果一看,吼吼,正合我意,利用的CSS来设置的,而且是webkit浏览器的. 得好好研究这几个属性下,才能自己动手改造. webkit浏览器css设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scroll

CSS设置滚动条样式

因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: 下面就讲解这几个属性怎么使用,代表什么意思. 一:webkit下面的CSS设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-trac

CSS设置滚动条样式[转]

原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-

webkit下面的CSS设置滚动条

webkit下面的CSS设置滚动条 1.主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-res

设置Mac自动显示和隐藏 Dock 栏的速度

Dock 显示和隐藏,系统默认设置成了1秒通过终端.APP修改显示和隐藏的时间 (单位:秒) 默认的: defaults write com.apple.dock autohide-delay -int 1 优化的: defaults write com.apple.dock autohide-delay -int 0.8 defaults write com.apple.dock autohide-delay -int 0.6 defaults write com.apple

css设置文本最多显示两行，多余部分为省略号

首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行这三个是css的基础属性,需要记得. 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertical; //从

css设置使文字显示2行多余的为省略号。。。

.title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-all; text-overflow: ellipsis; /** 多行 **/ display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-l

RecyclerView 滚动条的显示与隐藏

<android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" > </android.support.v7.widget.RecyclerView> 纵向显示: android:scrollbars=&