• 纯 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

  • 相关阅读:
    [Abp vNext 源码分析]
    C# 结合 PInvoke 对接 IP 摄像头的笔记
    Abp vNext 自定义 Ef Core 仓储引发异常
    [Abp vNext 源码分析]
    [Abp vNext 源码分析]
    [Abp vNext 源码分析]
    网站SEO中服务器优化的三个问题
    用香港服务器还是国内服务器好
    租用香港服务器最重要的三个问题
    如何选择服务器操作系统
  • 原文地址:https://www.cnblogs.com/DoubleLoong/p/8385179.html
Copyright © 2020-2023  润新知