全国服务热线:4008-888-888

技术知识

应用CSS完成无翻转条翻转的两种方式

大家都了解,撸网页页面的情况下当大家的內容超过了大家的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完成无翻转条翻转作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服