我试图制作一个滑块,一切都没问题,直到我把input
放进去。
如果我在输入内部单击然后向右拖动,即使将overflow
设置为hidden
,我的所有内容也会随着滚动一起移动。
我问了这个demo。
这是来源:
<div class="modal-content">
<div class="modal-content-slide">
<div class="center-slide-content">
<div class="right-content">
<div class="inside-content">
<p>
Click inside the input and drag to the right
</p>
<p class="morrow-url-input-wrapper">
<input type="text" />
</p>
</div>
</div>
</div>
</div>
和css:
.modal-content {
background-color: #ccc;
position: relative;
width: 550px;
border-radius: 5px;
margin: 20px;
height: 240px;
overflow: hidden;
}
.modal-content-slide {
position: absolute;
width: 2100px;
}
.right-content {
background-color: #515151;
width: 220px;
height: 180px;
padding: 10px;
border-radius: 5px;
box-shadow: #285b76 0 1px 1px;
}
我缺少什么,我该如何防止这种情况?