スクロールバーを隠しますが、それでもスクロールできます。
スクロールバーを表示せずに、ページ全体をスクロールできるようにしたいです。
Google Chromeでは、
::-webkit-scrollbar {
display: none;
}
しかし、Mozilla FirefoxとInternet Explorerはそのようには動作しないようです。
私もCSSでこれを試してみました：
overflow: hidden;
それはスクロールバーを隠します、しかし私はもうスクロールすることができません。
それでもページ全体をスクロールできるのに、スクロールバーを削除する方法はありますか？ CSSかHTMLだけでお願いします。
正常に動作しているだけのテスト。
#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を実行すると、正確なスクロールバー幅が表示されます。
または
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;
}
情報：
この答えに基づいて、 単純なスクロールプラグイン を作成しました。これが誰かに役立つことを願っています。
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; // IE 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
更新： Firefox用の新しいscrollbar-widthプロパティを追加しました。
Firefoxの古いバージョンの場合は、overflow: -moz-scrollbars-none;を使用してください。
更新： FirefoxはCSSでスクロールバーを隠すことをサポートするようになりました。そのため、すべての主要ブラウザ（Chrome、Firefox、IE、Safariなど）が対象になりました。
スクロールバーを削除する要素に次のCSSを適用するだけです。
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 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 browsersだけのためのものです。あるいは、ブラウザ固有のCSSコンテンツを使用することもできます（将来的にそれがある場合）。すべてのブラウザはそれぞれのバーに対して異なる特定のプロパティを持つことができます。
Microsoft Edgeの場合：-ms-overflow-style: -ms-autohiding-scrollbar;または-ms-overflow-style: none; as MSDN あたり。
Firefoxに相当するものはありません。これを実現するjQueryプラグインはありますが、 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
この答え にはコードが含まれていないので、 page からの解決策は次のとおりです。
そのページによると、このアプローチはうまくいくためにスクロールバーの幅を前もって知る必要はなく、その解決策はすべてのブラウザでもうまくいき、 ここ で見ることができます。
良いことは、スクロールバーを隠すためにパディングや幅の違いを使うことを強制されていないということです。
これもズームセーフです。パディング/幅ソリューションは、最小にズームしたときにスクロールバーを表示します。
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の名前です。
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仕様 が実装されているため、この質問に対する答えは非常に簡単です。
次のCSSを使うだけです：
scrollbar-width: none;
Firefox 64リリースノートへのリンク ここ 。
つかいます：
#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);
}
<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でもスクロール可能ですが、他のブラウザについてはよくわかりません。
私の問題：私は私のHTMLでスタイルをしたくない、私は直接スクロールバーを使わずに直接スクロールできるようにしたい。
box-sizing valueはパディングやマージンの解決策に影響を与え、 box-sizing：content-box と連携します。
私はまだ "-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; /* IE 10+ */
overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none; /* might be enought */
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;
}
最近のブラウザではwheel eventhttps://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;
});
現在受け入れられている答えのように、内側のdivにパディングを追加することは、何らかの理由でbox-model: border-boxを使いたい場合にはうまくいきません。
どちらの場合もうまくいくのは、内側のdivの幅を100％にスクロールバーの幅を加えたものまで増やすことです（外側のdivにoverflow: hiddenを仮定）。
たとえば、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- *のようなフレームワークでうまく動作します。追加のdivが2つと、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>これはクロスブラウザで機能しますが、モバイルブラウザのネイティブスクロールバーを非表示にしません
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
これは私のために働く：
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
perfect-scrollbarプラグインは行くべき道のようです、参照してください： https://github.com/noraesae/perfect-scrollbar
それはスクロールバー問題のためのよく文書化されたそして完全なJSベースの解決策です。
これは、それでもやはりすべてのブラウザで機能するはずの、divitis風の解決策です...
マークアップは次のとおりで、相対的な配置で何かの内側にある必要があります（そしてその幅は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;
}
これは体になります：
<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の配置のためにスクロールバーを隠せませんでした。それ故、私は表面的にそれをカバーするdivを導入することによってスクロールバーを隠すことにしました。以下の例は水平スクロールバーのものです。
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</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要素については、Microsoft、Chrome、およびMozillaで次の作業を行いました。
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
もう1つの厄介な方法は、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's blogに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 */
}
これが役に立つことを願っています：*
#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がオーバーフローします。簡単です。
子の幅の幅を100％、パディング幅を15px、オーバーフローxをスクロールおよびオーバーフローに設定するだけです。親のために非表示にし、必要な幅であれば、IE Edgeを含むすべての主要ブラウザで完全に機能します。 IE8以下を除いて。
2019年：上記の作品の答え。
背景を設定する必要はほとんどありませんが、時々スクロールバーの高さが正しくないというバグがあります。これはあなたが以下で指定されるように修正することができます
height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;
私はこの問題を抱えていました、そしてそれは修正するのがとても簡単です。
2つの容器を入手してください。内側はスクロール可能なコンテナになり、外側は明らかに内側を収容します。
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
それは超単純で、どんなブラウザでも動作するはずです。
水平スクロールバーと垂直スクロールバーの両方を非表示にします。
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin:0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
以下のコードを使用してスクロールを非表示にできますが、スクロールすることはできます
.element::-webkit-scrollbar { width: 0 !important }