blocks|key|853042|text|overflow-x:+hidden;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|853043|​|unstyled|853044|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>overflow-x: hidden;
</code></pre>

<p></p>


blocks|key|853096|text|别忘了写overflow-x:+hidden;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|853097|代码应该是：|853098|overflow-y:+scroll;
overflow-x:+hidden;|code-block|syntax|javascript|853099|entityMap^0|4|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>Don't forget to write <code>overflow-x: hidden;</code></p>

<p>The code should be:</p>

<pre><code>overflow-y: scroll;
overflow-x: hidden;
</code></pre>


blocks|key|853072|text|CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|853073|overflow-y:+scroll;|code-block|syntax|javascript|853074|See+it+on+jsFiddle。|offset|length|853075|请注意，如果从overflow-y属性中删除-y，则会显示水平滚动条。|style|CODE|853076|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/alexdickson/94Wh7/^0|0|0|0|I|0|0|7|A|M|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]|$I|15|J|16|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<h3>CSS</h3>
<pre><code>overflow-y: scroll;
</code></pre>
<p><a href="http://jsfiddle.net/alexdickson/94Wh7/" rel="noreferrer">See it on jsFiddle</a>.</p>
<p>Notice if you remove the <code>-y</code> from the <code>overflow-y</code> property, the horizontal scroll bar is shown.</p>


blocks|key|1067663|text|使用overflow-y:+scroll时，即使不需要垂直滚动条，它也会一直存在。如果你想让y-scrollbar只在需要的时候才可见，我发现这是可行的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1067664|.mydivclass+{overflow-x:+hidden;+overflow-y:+auto;}|code-block|syntax|javascript|1067665|entityMap^0|2|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>With <code>overflow-y: scroll</code>, the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:</p>

<pre><code>.mydivclass {overflow-x: hidden; overflow-y: auto;}
</code></pre>


blocks|key|1067771|text|将此代码添加到您的CSS中。它将禁用水平滚动条。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067772|html,+body+{
++++max-width:+100%25;
++++overflow-x:+hidden;
}|code-block|syntax|javascript|1067773|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Add this code to your CSS. It will disable the horizontal scrollbar.</p>

<pre><code>html, body {
    max-width: 100%;
    overflow-x: hidden;
}
</code></pre>


blocks|key|853167|text|无滚动(不指定x或y)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|853168|.your-class+{
+++overflow:+hidden;
}|code-block|syntax|javascript|853169|删除水平滚动：|853170|.your-class+{
+++overflow-x:+hidden;
}|853171|删除垂直滚动：|853172|.your-class+{
+++overflow-y:+hidden;
}|853173|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>No scroll (without specifying x or y):</p>

<pre><code>.your-class {
   overflow: hidden;
}
</code></pre>

<p>Remove horizontal scroll:</p>

<pre><code>.your-class {
   overflow-x: hidden;
}
</code></pre>

<p>Remove vertical scroll:</p>

<pre><code>.your-class {
   overflow-y: hidden;
}
</code></pre>


blocks|key|1067934|text|若要移除水平滚动条，请使用以下代码。它100%25有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067935|html,+body+{
++++overflow-x:+hidden;
}|code-block|syntax|javascript|1067936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To remove the horizontal scroll bar, use the following code. It 100% works.</p>

<pre><code>html, body {
    overflow-x: hidden;
}
</code></pre>


blocks|key|853638|text|overflow-x:hidden;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|853639|但是，您在网站上的内容可能无法显示。因此，最好检查元素，检查div或sections的宽度，并删除它可能额外添加的任何右/左边距。更好的解决方案|unstyled|853640|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>overflow-x:hidden;
</code></pre>
<p>However, it may happen that your content on the website may not show. So best to inspect element and check the widths of your divs or sections, and remove any right/left margins it may have put in extra. Much better solution</p>


blocks|key|853343|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|853344|overflow:+auto;|code-block|syntax|javascript|853345|这将显示垂直滚动条，并且仅当存在垂直溢出时才会显示，否则它将被隐藏。|853346|如果同时存在x和y溢出，则会同时显示x和y滚动条。|853347|要隐藏x(水平)滚动条，即使存在，也只需添加：|853348|overflow-x:+hidden;|853349|​|853350|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;
}|853351|<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>|853352|853353|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|13|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|U|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>Use:</p>

<pre><code>overflow: auto;
</code></pre>

<p>This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.</p>

<p>If you have both an x and y overflow, then both x and y scrollbars will be shown.</p>

<p>To hide the x (horizontal) scrollbar, even if present simply add:</p>

<pre><code>overflow-x: hidden;
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;li&gt;Item 4&lt;/li&gt;
  &lt;li&gt;Item 5&lt;/li&gt;
  &lt;li&gt;Item 6&lt;/li&gt;
  &lt;li&gt;Item 7&lt;/li&gt;
  &lt;li class="nowrap"&gt;Item 8 and some really long text to make it overflow horizontally.&lt;/li&gt;
  &lt;li&gt;Item 9&lt;/li&gt;
  &lt;li&gt;Item 10&lt;/li&gt;
  &lt;li&gt;Item 11&lt;/li&gt;
  &lt;li&gt;Item 12&lt;/li&gt;
  &lt;li&gt;Item 13&lt;/li&gt;
  &lt;li&gt;Item 14&lt;/li&gt;
  &lt;li&gt;Item 15&lt;/li&gt;
  &lt;li&gt;Item 16&lt;/li&gt;
  &lt;li&gt;Item 17&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1067968|text|使用这段代码..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067969|.card::-webkit-scrollbar+{
++display:+none;
}|code-block|syntax|javascript|1067970|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use This chunk of code..</p>

<pre><code>.card::-webkit-scrollbar {
  display: none;
}
</code></pre>


blocks|key|1068015|text|删除水平滚动条，但不允许滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1068016|&::-webkit-scrollbar:horizontal+{
++height:+0;
++width:+0;
++display:+none;
}

&::-webkit-scrollbar-thumb:horizontal+{
++display:+none;
}|code-block|syntax|javascript|1068017|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more.</p>
<pre><code>&amp;::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&amp;::-webkit-scrollbar-thumb:horizontal {
  display: none;
}
</code></pre>


blocks|key|1068096|text|隐藏滚动条|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1068097|步骤1：|1068098|访问任何浏览器，例如Google+Chrome|1068099|单击键盘上的ctrl%2BShift%2Bi+inspect+use+open+tools+Developer|1068100|第2步：|1068101|将鼠标放在div上并更改样式div使用此命令：|1068102|+overflow:+hidden;+/*+Hide+scrollbars+*/|code-block|syntax|javascript|1068103|现在转到在项目中添加文件.css并包含文件|1068104|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|10|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<h2>Hide Scrollbars</h2>
<h2>step 1:</h2>
go to any browser for example Google Chrome
<br> click on keyboard ctrl+Shift+i inspect use open tools Developer 
<h2>step 2:</h2>
Focused mouse on the div and change style div
use try this:
<pre><code> overflow: hidden; /* Hide scrollbars */
</code></pre>
<p>now go to add file .css in project and include file</p>


blocks|key|1067756|text|我在使用的时候遇到了问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067757|overflow:+none;|code-block|syntax|javascript|1067758|但我知道CSS并不是真的喜欢它，而且它不能100%25地按照我想要的方式工作。|1067759|然而，这是一个完美的解决方案，因为我的内容都不应该比预期的大，这解决了我的问题。|1067760|overflow:+auto;|1067761|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I had been having issues where I was using</p>

<pre><code>overflow: none;
</code></pre>

<p>But I knew CSS didn't really like it and it didn’t work 100% for how I wanted it to.</p>

<p>However, this is a perfect solution as none of my content is supposed to be larger than intended and this has fixed the issue I had.</p>

<pre><code>overflow: auto;
</code></pre>


<p>When I set <code>overflow: scroll</code>, I get horizontal and vertical scrollbars. </p>

<p>Is there a way to remove the horizontal scrollbar in a div?</p>


How do I remove the horizontal scrollbar in a div?

当我设置overflow: scroll时，我得到水平和垂直滚动条。有没有办法删除div中的水平滚动条？

问如何删除div中的水平滚动条？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除div中的水平滚动条？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除div中的水平滚动条？
EN