css - マウスオーバーdivの場合にのみスクロールバーを表示する

Question

これを考えるとdiv：

<div style="overflow:auto;"></div>

マウスがdivの上にあるときにのみスクロールバーを表示するにはどうすればよいですか？

スクロールバーを常に表示したくありません。Facebookの右上隅はその一例です。

Answer 1

マウスがその上にくるまでオーバーフローを非表示にしてから、自動にすることができます。これは私がしたことです...16pxのパディングは、スクロールバーの幅が16pxであると想定しており、スクロールバーが表示されたときにテキストが再折り返されないようになっていることに注意してください。

    div.myautoscroll {
        height: 40ex;
        width: 40em;
        overflow: hidden;
        border: 1px solid #444;
        margin: 3em;
    }
    div.myautoscroll:hover {
        overflow: auto;
    }
    div.myautoscroll p {
        padding-right: 16px;
    }
    div.myautoscroll:hover p {
        padding-right: 0px;
    }

このフィドルで実際の動作を確認してください。右側の「結果」ウィンドウを広げてボックス全体を表示するか、cssの幅を狭くする必要があります。

---

2014-10-23を編集

システムとブラウザのスクロールバーの表示方法にバリエーションが増えた16pxため、ケースに合わせてスペースを調整する必要があるかもしれません。このパディングの目的は、スクロールバーが表示されたり消えたりするときにテキストがリフローされないようにすることです。

Mac OS Xの新しいバージョン（少なくとも10.8.x）などの一部のシステムでは、スクロールを開始するまでスクロールバーが表示されないため、このテクニック全体が失敗する可能性があります。スクロールバーが表示されない場合は、ホバーするまで非表示にする理由がないか、オーバーフローを切り替えるのではなく、そのままにしておくことをお勧めしautoますscroll。

Answer 2

オーバーフローを変更することでの答えには、内部ブロックの幅の不一致、リフローのトリガー、パディングを処理するための追加のコードが必要であり、ホバーされていないときにキーボード（および場合によっては他の）インタラクションを無効にしないなど、多くの問題があります。

リフローをトリガーしない同じ効果を得る簡単な方法があります。visibilityプロパティとネストされたブロックを使用します。

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

実例のあるペンは次のとおりです：http：//codepen.io/kizu/pen/OyzGXY

このメソッドのもう1つの機能は、visibilityアニメーション化できることです。そのため、トランジションを追加できます（上記のペンの2番目の例を参照）。トランジションを追加すると、UXに適しています。スクロールバーは、別の要素に移動しているときにホバーしたときにすぐには表示されません。また、マウスカーソルでターゲットを設定したときにスクロールバーを見逃しにくくなります。これは、スクロールバーがすぐに非表示にならないためです。良い。

Answer 3

:hoverセレクターでdivを選択してみてください

#div { overflow: hidden; }

#div:hover { overflow:visible; }

Answer 4

私は同じ問題を抱えていて、結果なしで上記の解決策をたくさん試しました。多くの研究の結果、私はこの解決策にたどり着きました。これらの行をcssファイルに貼り付けるだけです。

div.myautoscroll {
    height: 40ex;
    width: 40em;
    overflow: hidden;
    border: 1px solid #444;
    margin: 3em;
}
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

私に起こっていたのは、Mac OSX lion以上（私はYosemiteを実行しています）がスクロールバーを自動的に非表示にして、より滑らかに見えるようにすることでした。上記のコードはデフォルトを上書きし、スクロールバーを戻します...ホバー時にスクロールするようにオーバーフローを変更するためのcssと組み合わせると、新しいMacOSXのユーザーにとって望ましい結果が得られます。これがフィドルです（私自身ではなく、この答えを見つけたものです）。http://jsfiddle.net/simurai/UsvLN/

Answer 5

私はこの解決策を思いついた。基本的に、負のマージンは垂直スクロールバーをカットします。

.hidden-scrollbar {
    padding-right: 50px;
    margin-right: -25px;        
    overflow-y: auto;        
}

.hidden-scrollbar.hover-scrollbar:hover {
    padding-right: 25px;
    margin-right: 0;
    overflow-y: auto;
}

少ないミックスイン

.hidden-scrollbar(@padding) {
    padding-right: 2 * @padding;
    margin-right: -@padding;
    overflow-y: auto;        

    &.hover-scrollbar:hover {
        padding-right: @padding;
        margin-right: 0;
    }
}

注：@paddingは、少なくともスクロールバーの幅（25pxなど）である必要があります

基本的に、これをLESS / CSSに追加し、スクロールバーを切り取る必要のある要素にクラスを追加します。

Answer 6

これは、余白/パディングや可視性を移動するのではなく、色を透明にしてホバーで復元するだけです。

.mydiv::-webkit-scrollbar-track{
    background-color: transparent;
}
.mydiv::-webkit-scrollbar-thumb{
    background-color: transparent;
}
.mydiv:hover::-webkit-scrollbar-thumb{
    background-color: #a0a0a0;
}
.mydiv:hover::-webkit-scrollbar-track{
    background-color: #e1e1e1;
}

Answer 7

このCSSハックを試してみてください！。

.c-scroller {
  overflow: hidden;
  height: 90vh
}
.c-scroller-content,
.c-scroller:hover,
.c-scroller:focus {
  overflow: auto;
}

<div class="c-scroller">
    Item 1<br />
    Item 2<br />
    Item 3<br />
    Item 4<br />
    Item 5<br />
    Item 6<br />
    Item 7<br />
    Item 8<br />
    Item 9<br />
    Item 10<br />
    Item 11<br />
    Item 12<br />
    Item 13<br />
    Item 14<br />
    Item 15<br />
    Item 16<br />
    Item 17<br />
    Item 18<br />
    Item 19<br />
    Item 20<br />
    Item 21<br />
    Item 22<br />
    Item 23<br />
</div>

Answer 8

cssを使用して、通常のビューに非表示になっているoverflow-yを追加できる場合は、：hoverイベントを追加してoverflow-y：autoを追加できます。

このリンクを見る

---

Jqueryを使用できる場合は、ホバーイベントを使用してください

このフィドルを見る

---

スニペット：

jQuery(".main_panel").hover(
  function() {
    jQuery(this).addClass("show_cont");
  },
  function() {
    jQuery(this).removeClass("show_cont");
  }
);

.main_panel {
  width: 300px;
  height: 200px;
  display: block;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.limt {
  padding: 0;
  display: inline-block;
  width: 90%;
  margin: 0;
}

ul.limt li {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  line-height: 28px;
}

.show_cont {
  overflow-y: auto;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
  <ul class="limt">
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
  </ul>
</div>