javascript - 防止绝对位置元素粘在可滚动 div 内

Question

多个元素(例如颜色选择器、日期选择器和时间选择器)存在此问题，当它们弹出并因此相对于输入绝对定位时，如果用户滚动新生成的元素也会随之移动。

根据大多数插件的性质(我注意到的所有主要 Bootstrap 插件都这样做)，我试图想出一种方法来定位并保持这些元素相对于其原始位置的固定，而不需要破解每个插件(如果可能的话)。

下面是我使用 Bootstrap 日期选择器的问题示例。单击输入以生成日期选择器，然后滚动并注意日期选择器保持相对于屏幕而不是输入。

JSFiddle 链接:http://jsfiddle.net/GuJR6/1/

谢谢!

.container {
    margin-top: 15px;
    height:400px;
    overflow-y: scroll;
}
.scrolling-content {
    height:1000px;
}

<div class="container">
    <div class="scrolling-content">
        <div class="well text-center">
            <input type="text" class="datetimepicker" readonly>
        </div>
    </div>
</div>

$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

Answer 1

我只是forked bootstrap-datetimepicker并添加了 Jan Peapke 提到的 container 选项。您可以像这样使用它:

$(selector).datetimepicker({ container: nativeDOMElement });
$(selector).datetimepicker({ container: jQueryObject });
$(selector).datetimepicker({ container: jQuerySelector });

这可以帮助您解决问题:

在你的CSS中:

.scrolling-content {
    position: relative;
}

比较:CSS-Tricks

js

$(".datetimepicker").datetimepicker({  
         format: 'yyyy-mm-dd hh:ii',
         container: '.scrolling-content'
     });

fiddle

http://jsfiddle.net/marionebl/GuJR6/2/

fiddle 中的第一个输入适用于您的问题的解释修复。第二个应该像以前一样表现。

相关拉取请求

https://github.com/smalot/bootstrap-datetimepicker/pull/215