纯 CSS 实现隐藏滚动条，同时保留滚动效果

拖动页面是经常的也是必须的，但是滚动条的存在与否就需要看条件和设计需求，不然就会影响整个页面的美观。

思路：

是在需要滚动的 div 外面再套一个 div 。外套 div 设置 overflow:hidden。

而内容 div 设置 x，y 轴滚动条其中一个显示，另一个隐藏。

然后再设置外套 div 的 width 或 height 小于内层 div 的 width 或 height。

这里是一个前辈的例子：http://blog.csdn.net/liusaint1992/article/details/51277751

下面是我后来的尝试（横向滚动条的隐藏）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制输入框较长内容，隐藏滚动条</title>
    <style>
        .outer-container,.content {
            white-space: nowrap;
             200px; height: 20px;
        }
        .outer-container {
            position: relative;
            overflow: hidden;
            border: 1px solid #000000;
        }
        .inner-container {
            /*position: absolute; left: 0;*/
            overflow-x: scroll;
            overflow-y: hidden;
        }

        /* for Chrome */
        .inner-container::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
<div class="outer-container">
    <div class="inner-container">
        <div class="content">
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
        </div>
    </div>
</div>

<div class="outer-container">
    <div class="inner-container">
        <div class="content">
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
        </div>
    </div>
</div>

<div class="outer-container">
    <div class="inner-container">
        <div class="content">
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
            saldjl jalsj djsajldj asld jlsjaldjlasdksa;kd ;kas;ojdposavndahmlkfhs;jfaSjfaghhkjlhaflhahfalkjf
        </div>
    </div>
</div>

</body>
</html>

Demo 地址：http://runjs.cn/detail/leerhm0q

纯 CSS 实现隐藏滚动条，同时保留滚动效果

相关推荐