html css隐藏滚动条 - 隐藏滚动条,但仍然可以滚动




firefox隐藏滚动条 safari隐藏滚动条 (18)

我有这个问题。 超级简单的修复。 得到两个容器。 内部将是你的可滚动容器,外部显然将容纳内部:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

超级简单,应该适用于任何浏览器。 祝你好运!

我希望能够浏览整个页面,但没有显示滚动条。

在Google Chrome中,它是:

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

但Mozilla Firefox和Internet Explorer似乎并不像那样工作。

我也尝试过在CSS中:

overflow: hidden;

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

有什么办法可以删除滚动条,仍然可以滚动整个页面? 请仅使用CSS或HTML。


不知道我是不是晚了,但加入

    overflow: -moz-scrollbars-none;

为我工作


只需将宽度设置为100%,填充为15px,overflow-x滚动并溢出:对于父级和任何宽度都是隐藏的,它适用于包括IE Edge在内的所有主流浏览器,IE8除外;降低。


如果由于某些原因想要使用box-model: border-box ,则在当前接受的答案中向内部div添加填充将不起作用。

在两种情况下工作的内容都是将内部div的宽度增加到100%加上滚动条的宽度(假设overflow: hidden在外部div上)。

例如,在CSS中:

.container2 {
    width: calc(100% + 19px);
}

在JavaScript中,跨浏览器:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是一个把重叠的div与滚动条重叠的技巧,它没有任何滚动条

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

这仅适用于webkit浏览器..或者您可以使用浏览器特定的css(如果将来有任何问题),每个浏览器都可以为其各自的酒吧拥有不同的特定属性

- 编辑 -

对于Microsoft Edge使用: -ms-overflow-style: -ms-autohiding-scrollbar; 或者-ms-overflow-style: none; 根据MSDN

FF没有等价物虽然有JQuery插件来实现这个http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html


只需使用以下3行,您的问题就会解决:

 #liaddshapes::-webkit-scrollbar {
        width: 0 !important;
    }

liaddshape是scrool所在的div的名称。


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。

here检查(在IE和FF中测试)。


另一个简单的工作fiddle

#maincontainer {
    background: orange;
    width:200px;
    height:200px;
    overflow:hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width:200px;
    height:200px;
    top:20px;
    left:20px;
    overflow:auto;
}

在父容器上隐藏溢出,并在子容器上自动溢出。 简单。


本Answer不包含代码,因此以下是来自page的解决方案:

根据该页面,此方法不需要事先知道滚动条的宽度,以便工作,并且该解决方案也适用于所有浏览器,并且可以在here看到。

好处是你不必使用填充或宽度差异来隐藏滚动条。

这也是放大安全。 填充/宽度解决方案在放大到最小值时显示滚动条。

FF修正: http://jsbin.com/mugiqoveko/1/edit?output : http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>



这将在身体上:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

这就是CSS:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}

这是我如何做水平滚动,只有CSS和适用于像bootstrap / col- *框架。 它只需要2个额外的div和父宽度或最大宽度设置:

如果您有触摸屏,您可以选择文本进行滚动或用手指进行滚动。

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

懒人们的短版本:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>


只是一个工作正常的测试。

#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 */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

工作小提琴

JavaScript的:

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

JavaScript工作小提琴

要么

使用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;
}

工作小提琴

JavaScript工作小提琴

信息:

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


易于使用Webkit,可选样式:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

这是另一种尚未提及的方式。 它非常简单,只涉及两个div和CSS。 不需要JavaScript或私有CSS,它可以在所有浏览器中使用。

此示例演示隐藏垂直滚动条,但它可以很容易地适用于水平滚动条。 它使用负边距将滚动条移出父项,然后使用相同的填充量将内容推回原始位置。 查看JsFiddle演示

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}

#subparant{
    overflow:hidden;    
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:10%;
}

#child{
    width:511px;
    background-color:rgba(123,8,10,0.42);
}

<body>
    <div id="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>

这适用于我:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

注意:在最新版本的Firefox中, -moz-scrollbars-none属性已被弃用( link )。


我注意到这篇文章:

https://web.archive.org/web/20171118200650/http://daniel-codes.blogspot.com/2011/04/html-in-textviews.html

将<div>列为Html.fromHtml()支持,但它不显示对“align”属性的支持。

(该页面上的标签显示其他受支持的属性。)

作者说,他通过查看Android的git存储库中的代码来构建引用。

编辑:随着时间的推移,支持的标签列表似乎已更改。 请参阅后面的帖子,例如: http://www.grokkingandroid.com/android-quick-tip-formatting-text-with-html-fromhtml/http://www.grokkingandroid.com/android-quick-tip-formatting-text-with-html-fromhtml/

基于这两篇文章,我建议检查源代码似乎是获取最新信息的最可靠方法。







html css google-chrome internet-explorer firefox