关键词：
看效果，没有滚动条，超出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>
隐藏滚动条(代码片段)
3种方法实现CSS隐藏滚动条并可以滚动内容2018-03-17539View0隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了... 查看详情
如何隐藏窗口滚动条并使滚动仍然有效[重复]
】如何隐藏窗口滚动条并使滚动仍然有效[重复]【英文标题】：Howtohidewindowscrollbarandmakescrollingstillworking[duplicate]【发布时间】：2014-03-2900:58:34【问题描述】：我想隐藏窗口滚动条，我使用了这个css样式bodyoverflow:hidden;但这里的问... 查看详情
css隐藏滚动条(代码片段)
...0c;并且有效果图的，读完总结就是：方法一：设置父元素overflow:hidden，再设置子元素overflow-x:scroll(或overflow-y，根据滚动方向)，设置子元素的margin或padding使滚 查看详情
css隐藏滚动条(代码片段)
//设置滚动条.overflow_y_scroll overflow-y:scroll;//隐藏滚动条.overflow_y_scroll_0::-webkit-scrollbar width:0!important; 查看详情
如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？
】如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？【英文标题】：HowdoIhidehorizontalscrollbarandkeepverticalscrollbarvisiblewhilestillbeingabletoscrollhorizontally?【发布时间】：2022-01-0122:57:04【问题描述】：有很多这样的问... 查看详情
为啥css的overflow不显示滚动条
参考技术A不要左右滚动条，需要设置X轴隐藏属性。y轴自动显示或强制显示。overflow-x:hidden;overflow-y:auto; 参考技术B设置overflow:hidden就不显示滚动条了本回答被提问者采纳 参考技术C代码错误 参考技术D设置htmloverflow:hidden; 第5个回... 查看详情
滚动条自动显示和隐藏(代码片段)
...0c;开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明... 查看详情
滚动条自动显示和隐藏(代码片段)
...0c;开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明... 查看详情
滚动条自动显示和隐藏(代码片段)
...0c;开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明... 查看详情
css根据屏幕大小显示或隐藏元素的类。(代码片段)
css隐藏滚动条(代码片段)
...0c;并且有效果图的，读完总结就是：方法一：设置父元素overflow:hidden，再设置子元素overflow-x:scroll(或overflow-y，根据滚动方向)，设置子元素的margin或padding使滚动条隐藏。(父子元素都是块级元素)方法二:使用... 查看详情
css实现隐藏滚动条同时又可以滚动(代码片段)
移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome和Safari），于是想... 查看详情
css3自定义滚动条样式(代码片段)
...rflow属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。属性值overflow:visible//默认值。内容不会被修剪，超出内容会显示在元素框之外overflow:hidden//内容会被修剪。超出内容被隐藏overflow:scroll//内容会被修剪... 查看详情
滚动条设置超出部分隐藏(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>滚动条设置超出部分隐藏</title></head><styletype="text/css">#boxwidth:500px;height:300px;overflow-x:hidden;ov 查看详情
滚动条自动显示和隐藏(代码片段)
...0c;开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明... 查看详情