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

时间:2023-03-10 02:27:56
css设置滚动条并显示或隐藏

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

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

有滚动条

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

最后就是想隐藏滚动条

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

代码

有滚动条并显示

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="width:229px; height:203px; text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
<div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
<div class="inner-containe" style="width:229px; height:203px; overflow:auto;">
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
</div>
</div> </body>
</html>

有滚动但是隐藏

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.outer-container{
width: 229px;
height: 203px;
position: relative;
overflow: hidden;
}
.inner-containe{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body style=" text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
<div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
<div class="inner-containe" >
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
<li><span >overflow10</span></li>
<li><span >overflow11</span></li>
<li><span >overflow12</span></li>
<li><span >overflow13</span></li>
<li><span >overflow14</span></li>
<li><span >overflow15</span></li>
<li><span >overflow16</span></li>
<li><span >overflow17</span></li>
<li><span >overflow18</span></li>
<li><span >overflow19</span></li>
</div>
</div> </body>
</html>