*新闻详情页*/>
大家都了解,撸网页页面的情况下当大家的內容超过了大家的div,常常会出現翻转条,危害美观大方。
特别是当大家在做1些导航栏菜单的情况下。翻转条1出現就破坏了UI实际效果。 大家不期待出現翻转条,也不期待超过去的內容被流放,就要保存电脑鼠标翻转的实际效果。大家都了解overflow:hidden是能够掩藏翻转条的,但存在的难题是:网页页面或元素丧失了翻转的特点,进而外溢內容也变得不能见,这样毫无疑问是不能取的。百度搜索下绝大多数全是在说overflow:hidden或overflow-y: no能够处理难题,可是其实不能很好的处理大家的难题,那末如何办呢?
接下来小萌详细介绍几种简易的方式,可是也并不是完善的处理难题了,各求所需吧
第1种:伪目标挑选器
在webkit核心的访问器里能够界定翻转条款式。在CSS原始处界定
::-webkit-scrollbar{ display:none;(或是width: 0;) }
但是现阶段本方式只在webkit核心访问器中合理(Chrome,Safari)。
第2种:变相掩藏
大致思路是在div外面再套1个div。这个div设定overflow:hidden。而內容div设定 overflow-x: hidden;overflow-y: scroll;随后再设定外层div的width小于內容div的width,便是用1个无翻转条的div包裹另外一个有翻转条的div,从而完成掩藏翻转条的实际效果。
事例:
<!DOCTYPE html> <html> <head> <title>应用CSS完成无翻转条翻转</title> <meta charset="UTF⑻"> <style type="text/css"> body,html { margin: 0; padding: 0; height: 100%; overflow: hidden; } ul,li { margin: 0; padding: 0; list-style: none; } .box_wrap { margin: 20px auto; width: 200px; height: 400px; border: 1px solid #ccc; overflow: hidden; } .box_wrap ul { width: 220px;/* 多出20像素是翻转条的部位,会被父器皿盖住就看不见了 */ height: 100%; overflow-x: hidden; overflow-y: auto; } .box_wrap ul li { width: 200px; height: 40px; line-height: 40px; border-bottom: 1px solid #ccc; font-size: 12px; text-align: center; } </style> </head> <body> <div class="box_wrap"> <ul> <li>检测数据信息1</li> <li>检测数据信息2</li> <li>检测数据信息3</li> <li>检测数据信息4</li> <li>检测数据信息5</li> <li>检测数据信息6</li> <li>检测数据信息7</li> <li>检测数据信息8</li> <li>检测数据信息9</li> <li>检测数据信息10</li> <li>检测数据信息11</li> <li>检测数据信息12</li> <li>检测数据信息13</li> <li>检测数据信息14</li> <li>检测数据信息15</li> <li>检测数据信息16</li> <li>检测数据信息17</li> <li>检测数据信息18</li> <li>检测数据信息19</li> <li>检测数据信息20</li> <li>检测数据信息21</li> <li>检测数据信息22</li> <li>检测数据信息23</li> <li>检测数据信息24</li> <li>检测数据信息25</li> <li>检测数据信息26</li> <li>检测数据信息27</li> <li>检测数据信息28</li> <li>检测数据信息29</li> <li>检测数据信息30</li> </ul> </div> </body> </html>
总结
以上所述是网编给大伙儿详细介绍的应用CSS完成无翻转条翻转作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
Copyright © 2002-2020 在线网页制作_建网页_个人简介网页制作_简单网页_建立网页 版权所有 (网站地图) 粤ICP备10235580号