html - 小程序隐藏滚动条 - 隐藏水平滚动条




隐藏滚动条,但仍然可以滚动 (14)

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

在Google Chrome中,它是:

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

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

我也尝试过在CSS中:

overflow: hidden;

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

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



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

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


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

#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工作小提琴

信息:

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


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


在现代浏览器上,您可以使用wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
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;
});

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

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

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


我碰巧在我的项目中尝试了上述解决方案,出于某种原因,由于div定位,我无法隐藏滚动条。 因此,我决定通过引入一个表面覆盖它的div来隐藏滚动条。 下面的例子是针对水平滚动条的:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

相应的CSS如下所示:

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

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

本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;
}

这是另一种尚未提及的方式。 它非常简单,只涉及两个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;
}

这是我如何做水平滚动,只有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>


#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>

<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







firefox