隐藏滚动条，但仍可以滚动

我希望能够滚动整个页面，但不显示滚动条。

在Google Chrome中，它是：

::-webkit-scrollbar {
    display: none;
}

但Mozilla Firefox和Internet Explorer似乎不是这样工作的。

我也在CSS中尝试过：

overflow: hidden;

这确实隐藏了滚动条，但我不能再滚动了。

有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？

请只使用CSS或HTML。

当前回答

您可以使用下面的代码隐藏滚动条，但仍可以滚动：

.element::-webkit-scrollbar { 
    width: 0 !important 
}

2019-08-14 07:21:33

其他回答

HTML格式：

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

相应地应用CSS。

在这里检查（在Internet Explorer和Firefox中测试）。

2014-12-03 07:14:28

以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素：

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

2019-03-13 14:26:38

这是我如何做水平滚动；只有CSS，并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级：

如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。

.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.行{宽度：100%}.col-xs-4列{宽度：33%；浮动：左侧}.col-xs-3列{宽度：25%；浮动：左侧}.bg灰色{背景色：#DDDDD}.bg橙色{背景色：#FF9966}.bg蓝色{背景色：#6699FF}.bg橙色灯{背景色：#FFAA88}.bg蓝光{背景色：#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>

懒人版：

.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度：100px；背景色：#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div>

2016-12-07 15:18:17

在现代浏览器上，您可以使用wheel事件：

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});

2017-11-12 14:22:54

要隐藏内容溢出的元素的滚动条，请使用。

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */
}

2020-04-24 14:34:37

隐藏滚动条，但仍可以滚动

推荐文章

最新文章

标签