[Html] 隱藏滾動條,但仍然可以滾動



Answers

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

我希望能夠瀏覽整個頁面,但沒有顯示滾動條。

在Google Chrome中,它是:

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

但Mozilla Firefox和Internet Explorer似乎並不像那樣工作。

我也嘗試過在CSS中:

overflow: hidden;

這確實隱藏了滾動條,但我不能滾動了。

有什麼辦法可以刪除滾動條,仍然可以滾動整個頁面? 請僅使用CSS或HTML。




這是另一種尚未提及的方式。 它非常簡單,只涉及兩個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;
}



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

    overflow: -moz-scrollbars-none;

為我工作




只需使用以下3行,您的問題就會解決:

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

liaddshape是scrool所在的div的名稱。




<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




這是一個divitis-esque解決方案,它不應該適用於所有瀏覽器...

標記如下,並且需要位於具有相對位置的內部(並且其寬度應該被設置,例如400px):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}



function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

調用這些函數,對於要加載或卸載或重新加載滾動條的任何點。 我在Chrome中測試Chrome時仍然可以在Chrome中滾動。 不確定其他瀏覽器。




另一個簡單的工作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;
}

在父容器上隱藏溢出,並在子容器上自動溢出。 簡單。




在現代瀏覽器上,您可以使用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;
});



這是我如何做水平滾動,只有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>




Links