web-dev-qa-db-ja.com

divの水平スクロールバーを削除するにはどうすればよいですか？

overflow:scrollを設定すると、水平および垂直のスクロールバーが表示されます。

Divの水平スクロールバーを削除する方法はありますか？

htmlcssoverflowhorizontal-scrolling
101
Ravi
overflow-x: hidden;
167
basarat

overflow-x:hidden;を書くことを忘れないでください

コードは

overflow-y: scroll; overflow-x:hidden;

30
DevelopmentBucket

overflow-y:scrollを使用すると、垂直スクロールバーは必要なくても常に存在します。 y-scrollbarが必要なときにのみ表示されるようにしたい場合、これが機能することがわかりました。

.mydivclass {overflow-x: hidden; overflow-y: auto;}
17
Pasha

CSS

overflow-y: scroll;

jsFiddleで参照 。

-yプロパティからoverflow-yを削除すると、水平スクロールバーが表示されます。

15
alex

このコードをCSSに追加します。水平スクロールバーを無効にします。

  html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
11
vasanth

Scroll：//は、xまたはyを指定せずに

.your-class {
   overflow: hidden; 
}

水平スクロールを削除します。

.your-class {
   overflow-x: hidden; 
}

垂直スクロールを削除します。

.your-class {
   overflow-y: hidden; 
}
6
Mise

水平方向にオーバーフローするものがない場合は、単に使用することもできます

overflow:auto;

必要なときにのみスクロールバーを表示します。

http://css-tricks.com/the-css-overflow-property/

4
rspilhaus

水平スクロールバーを非表示にするには、必要なdivのスクロールバーを選択してdisplay: none;に設定するだけです。

注意すべきことの1つは、Mozillaにはそのようなオプションがないため、これはWebkitベースのブラウザ（Chromeなど）でのみ機能することです。

スクロールバーを選択するには、::-webkit-scrollbarを使用します

したがって、最終的なコードは次のようになります。

div::-webkit-scrollbar{
  display: none;
}
2
Shubham Jain
overflow: auto;

これは垂直スクロールバーを表示し、垂直オーバーフローがある場合のみ表示されます。それ以外の場合は非表示になります。

Xとyの両方のオーバーフローがある場合、xとyの両方のスクロールバーが表示されます。

X（水平）スクロールバーを非表示にするには、単に存在する場合でも追加します：

overflow-x: hidden;

body { font-family: sans-serif; }
.nowrap{
  white-space: nowrap;
 }

.container{ 
  height:200px; 
  width: 300px; 
  padding 10px; 
  border: 1px solid #444;
  
  overflow: auto;
  overflow-x: hidden;
 }
<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>
1
aero

水平スクロールバーを削除するには、このコードを使用します。それは100％動作します

html, body {overflow-x: hidden;}
1
Harshit Bansal