[英]Child div horizontally scrollable but fix parent window
I have a html, css question. 我有一个html,css问题。 I'd like to make child div horizontally scrollable but parent window unscrollable. 我想使子div水平滚动,但父窗口不可滚动。
Currently, the following is the code. 当前,以下是代码。
<div id="parent">
<div id="div1">
...
</div>
<div id="div2" style="overflow-x:scroll; width:2000px">
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
<img src="5.png"/>
<img src="6.png"/>
<img src="7.png"/>
</div>
</div>
But when scroll div2, it will make the whole window to scroll. 但是,当滚动div2时,它将使整个窗口滚动。
The following is the schematic diagram. 以下是示意图。
Anyone has any idea? 有人知道吗?
To make it overflow, the content must be larger than the div, not the div itself. 要使其溢出,内容必须大于div,而不是div本身。 and to be able to make it inline, you must use display:inline-block
and white-space: nowrap
. 为了能够内联,必须使用display:inline-block
和white-space: nowrap
。 Let me know if you have concerns. 如果您有任何疑问,请告诉我。
Check out the fiddle below. 查看下面的小提琴。
CSS CSS
#div2{
display:inline-block;
white-space: nowrap;
}
Set overflow:hidden;
设置overflow:hidden;
to your parent div and overflow-x: auto;
到您的父div和overflow-x: auto;
to your child div. 给你的孩子
You can simply disable scrolling for the html
or body
element. 您可以简单地禁用html
或body
元素的滚动。 Not entirely sure that's what you wish to do, but either that or the #parent
element. 不能完全确定这是您想要执行的操作,但是不能完全确定是#parent
元素。
html,body{
overflow:hidden;
}
or 要么
#parent{
overflow:hidden;
}
Additionally right now your #div2
is wider than most screens, so you won't get a scroll bar for it likely, so you might be intending to scroll the #parent
element? 另外,现在您的#div2
比大多数屏幕都宽,因此您可能不会获得滚动条,因此您可能打算滚动#parent
元素?
Additionally it is enough to set the overflow
to auto
instead of scroll
as scroll
just forces a scrollbar to be visible even if there is no content to scroll. 另外它足以设置overflow
到auto
,而不是scroll
的scroll
只是强制滚动条是可见的,即使是没有内容的滚动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.