我试图制作一个滑块,一切都很顺利,直到我把它放进input
去。
如果我在输入中单击然后向右拖动,我的所有内容都会随着滚动而移动,即使他被设置overflow
为hidden
.
我用这个问题做了一个演示。
这是来源:
<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;
}
我错过了什么,我该如何防止这种情况?