首页  >  问答  >  正文

css - 如何隐藏滚动条但又能滚动,不用js实现

知乎很多这样提问的,但是很多回答的人都不懂我们到底要什么。
有人说overflow:hidden;啊可以隐藏滚动条啊。
是啊,是可以隐藏但不能滚动啊。当然用js的方法我就不说了,不靠谱(毕竟要加载完才能设置高度,不然一开始拿p的高度一般是不正确的,所以说我不想用js实现)。

纯css实现呢,我只能兼容IE9或者以上。
首先是webkit,::-webkit-scrollbar{width: 0;}这个伪类是很好可惜只有webkit支持。
我下面说的方法是包括火狐谷歌IE(9和9+)都支持,但是得用局部滚动overflow:auto;
最简单的demo:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <meta name="renderer" content="webkit">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
        }
        
        html {
            overflow: hidden;
        }
        
        body {
            overflow: auto;
            width: calc(100vw + 20px);
        }
        
        .page {
            height: 200%;
            border: 1px dashed;
            width: 100vw;
        }
    </style>
</head>

<body>
    <p class="page">
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
    </p>
</body>

</html>
说说原理吧,首先是vw,vh这种css3单位不懂请百度,让body宽度是窗口宽度加上20px(浏览器滚动条差不多这个宽度),.page里面的宽度是100%视口也就是100vw,这样body的滚动条就被隐藏了(超出部分被html隐藏)。
优点:不用js(js必须页面加载完拿高度才准确)。
缺点:1、IE8不支持,2、移动端不用测试了,移动端滚动条没那么简单,3、overflow:auto;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

求有没有方法能解决第1,3个缺点的,要求不用js。

伊谢尔伦伊谢尔伦2765 天前564

全部回复(1)我来回复

  • 黄舟

    黄舟2017-04-17 13:48:07

    来源:隐藏滚动条,但仍然可以滚动

    作者:@Mr_Green

    只是一个测试,运行良好。

    雷雷

    工作小提琴

    JavaScript:

    由于不同浏览器的滚动条宽度不同,所以最好用 JavaScript 来处理。如果您执行Element.offsetWidth - Element.clientWidth,则会显示确切的滚动条宽度。

    JavaScript 工作小提琴

    使用Position: absolute

    雷雷

    工作小提琴

    JavaScript 工作小提琴

    信息:

    基于这个答案,我创建了一个简单的滚动插件。我希望这会对某人有所帮助。

    回复
    0
  • 取消回复