我试图让 ID 为“slider_”的输入范围 slider 在小屏幕尺寸上滚动时保持固定(当表格内容溢出滚动条时),这样它应该与其余内容一起滚动,尽管它只是保持固定在屏幕上并最终逃脱其父 div。
我尝试将 slider 嵌套在另一个 div 中,并在它们上设置各种位置,绝对位置、相对位置、粘性位置、固定位置、静态位置,但都没有成功。
这是我的一些 HTML
<div class="progress">
<input id="slider_" type="range" min="0" max="1500" value="750" class="slider clicked slider-knob" disabled>
<div class="progress-bar" id="progress-bar1" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Down Trend</span>
</div>
</div>
<div class="progress-bar" id="progress-bar2" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Strong Buy</span>
</div>
</div>
<div class="progress-bar" id="progress-bar3" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Buy</span>
</div>
</div>
<div class="progress-bar" id="progress-bar4" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Neutral</span>
</div>
</div>
<div class="progress-bar" id="progress-bar5" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Sell</span>
</div>
</div>
<div class="progress-bar" id="progress-bar6" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Strong Sell</span>
</div>
</div>
<div class="progress-bar" id="progress-bar7" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Up Trend</span>
</div>
</div>
</div>
CSS:
.slider {
position: absolute;
-webkit-appearance: none;
appearance: none;
width: inherit;
margin: 0;
height: inherit;
background: transparent;
width: 293px;
overflow: visible;
}
.progress {
overflow: visible;
min-width: 283px;
display: -ms-flexbox;
display: flex;
height: 1rem;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-radius: .25rem;
}
我也愿意使用 jquery 或 js 来解决这个问题。
最佳答案
.progress {
position: relative;
}
您需要为要坚持的绝对元素设置父级。以上应该有效。
关于javascript - 绝对定位的 div 不滚动;当其他内容滚动时保持固定在屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57148896/