隐藏滚动条，但仍然可以滚动 [英] Hide scroll bar, but while still being able to scroll

问题描述

在Google Chrome浏览器中：

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

但是Mozilla Firefox和Internet Explorer似乎并不像这样工作。 / p>

我也在CSS中试过这个：

  overflow：hidden; 
  

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

有什么办法可以删除滚动条，仍然可以滚动整个页面？
仅仅使用CSS或者HTML就可以了。

解决方案

只是一个测试工作正常。 b
$ b

  #parent {
 height：100％; 
宽度：100％; 
 overflow：hidden; 
} 
 
 #child {
 width：100％; 
身高：100％; 
 overflow-y：scroll; 
 padding-right：17px; / *为跨浏览器兼容性增加/减少此值* / 
} 
  

工作小提琴

JavaScript：

由于不同浏览器的滚动条宽度不同，最好用JavaScript处理。如果你这样做 Element.offsetWidth - Element.clientWidth ，确切的滚动条的宽度会显示出来。

JavaScript工作小提琴

或

$ b $ p使用位置：绝对，

  #parent {
 height：100％; 
宽度：100％; 
 overflow：hidden; 
 position：relative; 
} 
 
 #child {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：0; 
 right：-17px; / *增加/减少跨浏览器兼容性的值* / 
 overflow-y：scroll; 
 
  

工作小提琴

JavaScript工作小提琴

信息：

基于这个答案，我创建了一个简单的滚动插件。我希望这会帮助别人。

I want to be able to scroll through the whole page, but without the scrollbar being shown.

In Google Chrome it's:

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

But Mozilla Firefox and Internet Explorer don't seem to work like that.

I also tried this in CSS:

overflow: hidden;

That does hide the scrollbar, but I cant scroll anymore.

Is there any way I can remove the scrollbar and still being able to scroll the whole page? With just CSS or HTML, please.

解决方案

Just a test which is working fine.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

or

Using Position: absolute,

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.

这篇关于隐藏滚动条，但仍然可以滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！