スクロールバーを非表示にしますが、スクロールは可能です

ページ全体をスクロールできるようにしたいのですが、スクロールバーは表示されません。

Google Chromeの場合：

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

しかし、Mozilla FirefoxとInternet Explorerはそのように動作しないようです。

私はCSSでもこれを試しました：

overflow: hidden;

スクロールバーは非表示になりますが、これ以上スクロールできません。

ページ全体をスクロールしながらスクロールバーを削除する方法はありますか？

CSSまたはHTMLのみを使用してください。

うまく機能しているただのテスト。

#parent{
    width: 100%;
    height: 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{
    width: 100%;
    height: 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;
}

これは私にとって単純なCSSプロパティで機能します：

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

古いバージョンのFirefoxの場合は、次を使用します。 overflow: -moz-scrollbars-none;

更新：

FirefoxはCSSでスクロールバーを非表示にすることをサポートするようになったため、すべての主要なブラウザー（Chrome、Firefox、Internet Explorer、Safariなど）がカバーされるようになりました。

スクロールバーを削除する要素に次のCSSを適用するだけです。

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

これは、私が現在認識している、最もハッキングの少ないクロスブラウザーソリューションです。デモをご覧ください。

元の回答：

これはまだ言及されていない別の方法です。これは本当にシンプルで、2つのdivとCSSのみが含まれます。JavaScriptや独自仕様のCSSは必要なく、すべてのブラウザで機能します。コンテナーの幅を明示的に設定する必要もないため、流動的になります。

このメソッドは、負のマージンを使用してスクロールバーを親の外に移動し、次に同じ量のパディングでコンテンツを元の位置に戻します。この手法は、垂直、水平、および双方向のスクロールで機能します。

デモ：

• 垂直
• 横型
• 両方向

垂直バージョンのサンプルコード：

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

使用する：

<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コンテンツを使用することもできます（将来、存在する場合）。すべてのブラウザは、それぞれのバーに対して異なる特定のプロパティを持つことができます。

マイクロソフトエッジ使用の場合：-ms-overflow-style: -ms-autohiding-scrollbar;または-ms-overflow-style: none;としてMSDNあたり。

Firefoxに相当するものはありません。これを実現するためのjQueryプラグインがありますが、 http：//manos.malihu.gr/tuts/jquery_custom_scrollbar.html

この回答にはコードが含まれていないため、ここにページからの解決策があります：

このページによると、このアプローチは、機能するために事前にスクロールバーの幅を知る必要がなく、ソリューションはすべてのブラウザでも機能するため、ここで確認できます。。

良いことは、スクロールバーを隠すためにパディングや幅の違いを使わざるを得ないことです。

これもズームセーフです。パディング/幅ソリューションは、最小にズームしたときにスクロールバーを表示します。

Firefoxの修正：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>

次の3行を使用するだけで、問題が解決されます。

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

liaddshapesは、スクロールが来るdivの名前です。

これは私にとってクロスブラウザです。ただし、これによってモバイルブラウザのネイティブスクロールバーが非表示になることはありません。

ではSCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

ではCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

以下は、特定のdiv要素についてMicrosoft、Chrome、Mozillaで私のために働いていました：

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

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でテスト済み）。

2018年12月11日（Firefox 64以降）では、Firefox 64+がCSS Scrollbar Styling specを実装しているため、この質問に対する答えは非常に簡単です。

次のCSSを使用するだけです。

scrollbar-width: none;

Firefox 64リリースノートのリンクはこちら。

使用する：

CSS

#subparent {
    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);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

使用する

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

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

スクロールバーをロード、アンロード、または再ロードする任意のポイントでこれらの関数を呼び出します。私がChromeでテストしたので、それはまだChromeでスクロール可能ですが、他のブラウザーはわかりません。

これは私にとってはうまくいきます：

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

使用できる最新のブラウザーwheel event：

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

私の問題：HTMLコンテンツにスタイルを入れたくありません。CSSグリッドを使用して、スクロールバーなしで縦方向にスクロールするだけで体を直接スクロールできるようにしたいあらゆる画面サイズのを操作します。

ボックスのサイズ変更値衝撃パディングやマージンのソリューション、彼らはで動作するコンテンツボックス：ボックスのサイズ変更します。

それでも「-moz-scrollbars-none」ディレクティブが必要です。gdoronやMr_Greenと同様に、スクロールバーを非表示にする必要がありました。私はFirefoxのみに影響を与えるように試みましたが-moz-transform、-moz-padding-startあまりにも多くの作業を必要とする応答性の高い副作用がありました。

このソリューションは、「display：grid」スタイルのHTML本文コンテンツで機能し、応答が速いです。

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}

div現在受け入れられている回答のように、内部にパディングを追加しても、何らかの理由で使用したい場合は機能しませんbox-model: border-box。

どちらの場合でも機能するのは、内側の幅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 + ')';

これが私が横スクロールをする方法です。CSSのみで、Bootstrap / col- *のようなフレームワークでうまく機能します。2つの追加divのと、widthまたはmax-widthセットを持つ親のみが必要です。

テキストを選択してスクロールしたり、タッチスクリーンを使用している場合は指でスクロールしたりできます。

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

次のSASSスタイルでは、ほとんどのブラウザーでスクロールバーが透明になります（Firefoxはサポートされていません）。

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

私はプロジェクトで上記の解決策をたまたま試しましたが、何らかの理由で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*/
}

これは本体にあります：

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

これは、それでもすべてのブラウザで機能するはずの悪魔のようなソリューションです...

マークアップは次のとおりであり、相対位置の何かの中にある必要があります（そして、その幅は400ピクセルなどに設定する必要があります）。

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

perfect-scrollbarプラグインは、移動するための方法であると思われる、以下を参照してください。https://github.com/noraesae/perfect-scrollbar

これは、スクロールバーの問題に対する十分に文書化された完全なJavaScriptベースのソリューションです。

デモページ：http : //noraesae.github.io/perfect-scrollbar/

以下のコードを使用してスクロールバーを非表示にできますが、スクロールは可能です。

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

別のハックなアプローチはoverflow-y: hidden、次のようなもので要素を手動でスクロールすることです。

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

deepmikotoのブログにonmousewheelは、イベントを検出して処理する方法に関する優れた記事があります。これはうまくいくかもしれませんが、エレガントなソリューションとは言えません。

開発時に使用するスクロールバーを非表示にするための結合スニペットを共有したかっただけです。それは私のために働くインターネット上で見つかったいくつかのスニペットのコレクションです：

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

コンテンツがオーバーフローしている要素のスクロールバーを非表示にするには

.div{

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

}    

別の簡単な作業フィドル：

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

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

オーバーフローは親コンテナーで非表示になり、オーバーフローは子コンテナーでautoになります。シンプル。

このトリッキーなソリューションは、古いIE Webブラウザーでも機能します

[ 垂直スクロールバー ]の回避策です

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

試してみてください：jsfiddle

子の幅を100％、パディングを15ピクセルに設定overflow-xし、スクロールしoverflow:hiddenて、親と任意の幅を設定します。

Internet Explorer 8以下を除いて、Internet ExplorerやEdgeを含むすべての主要ブラウザで完全に動作します。