时间戳

首页 > 解决方案 > 绝对定位的 div 不滚动；当其他内容滚动时保持固定在屏幕上

javascript - 绝对定位的 div 不滚动；当其他内容滚动时保持固定在屏幕上

问题描述

我试图让 ID 为“slider_”的输入范围滑块在小屏幕尺寸上滚动时保持固定（当表格内容溢出滚动条时），这样它应该与其余内容一起滚动，尽管它只是固定在屏幕上并最终逃脱其父 div。

我试图将滑块嵌套在另一个 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 来解决这个问题。

标签： javascriptjqueryhtmlcss

解决方案

.progress {
  position: relative;
}

您需要为要坚持的绝对元素设置父级。以上应该工作。

推荐阅读