使用CSS实现无滚动条滚动

时间: 2018-09-13阅读: 2313标签: 滚动

我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的,但存在的问题是:页面或元素失去了滚动的特性,进而溢出内容也变得不可见,这样肯定是不可取的。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?


第一种:伪对象选择器

在webkit内核的浏览器里可以定义滚动条样式。在css初始处定义

::-webkit-scrollbar{
    display:none;(或者是width: 0;)
}

不过目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。


第二种:变相隐藏

大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width,就是用一个无滚动条的div包裹另一个有滚动条的div,从而实现隐藏滚动条的效果。

例子:

<!DOCTYPE html>
<html>
 
    <head>
        <title>使用css实现无滚动条滚动</title>
 
        <meta charset="UTF-8">
        <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>


来源:https://www.cnblogs.com/zmdComeOn/p/9618085.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1076

CSS:scroll-snap滚动事件停止及元素位置检测

CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

html页面滚动加载,可视区域判断

一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

3种方法实现Css隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!