Javascript 防止位置绝对元件卡在可滚动div内

如果用户滚动新生成的元素，则多个项目（例如，颜色选择器、日期选择器和时间选择器）会出现此问题，当这些项目弹出并因此相对于输入绝对定位时，新生成的元素也会随之移动

基于大多数插件的性质（我注意到所有主要的引导插件都是这样做的），我正在试图找到一种方法，以定位并保持这些元素相对于其原始位置的固定，而不必在可能的情况下对每个插件进行黑客攻击

下面是我使用引导数据采集器的一个例子。单击input生成datepicker，然后滚动并注意datepicker相对于屏幕而不是输入

链接到JSFIDLE:

谢谢

.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'});

.container{
边缘顶部：15px；
高度：400px；
溢出y：滚动；
}
.滚动内容{
高度：1000px；
}
$（“.datetimepicker”）.datetimepicker（{格式：'yyyy-mm-dd-hh:ii'}）；

恐怕问题在于引导日期时间选择器本身。
它不是附加到与输入相同的容器，而是附加到主体

我查阅了文档，看看是否有设置父项的选项，但恐怕没有

作为解决方案，您可以尝试其他框架，如或

您还可以尝试手动更正选取器的位置，方法是将单击处理程序附加到输入字段，该字段从正文中删除日期选取器，将其添加到scrollcontainer的内容中，并使用事件鼠标坐标将其正确定位在容器中。但似乎有很多麻烦。：）

问候,，

---

J

恐怕问题在于引导日期时间选择器本身。
它不是附加到与输入相同的容器，而是附加到主体

我查阅了文档，看看是否有设置父项的选项，但恐怕没有

作为解决方案，您可以尝试其他框架，如或

您还可以尝试手动更正选取器的位置，方法是将单击处理程序附加到输入字段，该字段从正文中删除日期选取器，将其添加到scrollcontainer的内容中，并使用事件鼠标坐标将其正确定位在容器中。但似乎有很多麻烦。：）

问候,， J

我刚刚添加了Jan Peapke提到的

容器

选项。您可以这样使用它：

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

这允许您解决您的问题：

在css中：

.scrolling-content {
    position: relative;
}

比较：

js

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

小提琴

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

相关拉动请求

我刚刚添加了Jan Peapke提到的

容器

选项。您可以这样使用它：

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

这允许您解决您的问题：

在css中：

.scrolling-content {
    position: relative;
}

比较：

js

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

小提琴

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

相关拉动请求

---

就连我也面临着这个问题。 通过添加var t找到解决方案

    $('YOURCLASSNAME').on('scroll', function () {
        var $this = $('.input-group.date');
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $this.datepicker('place');
        }, 50)
    });

在

if（showFocus）this.show（）之后添加上述代码
在这个街区
var Datepicker=bootstrap-Datepicker.js插件的函数（元素，选项）{….}
即使是我也一直面临这个问题。
$('YOURCLASSNAME').on('scroll', function () {
        var $this = $('.input-group.date');
        $this.datepicker('place');
    });

通过添加var t找到解决方案

    $('YOURCLASSNAME').on('scroll', function () {
        var $this = $('.input-group.date');
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $this.datepicker('place');
        }, 50)
    });

在
if（showFocus）this.show（）之后添加上述代码
在这个街区
var Datepicker=bootstrap-Datepicker.js插件的函数（元素、选项）{….}

$('YOURCLASSNAME').on('scroll', function () {
        var $this = $('.input-group.date');
        $this.datepicker('place');
    });

在之前添加以上代码

Datepicker.prototype = {...}

这就是解决办法。在所有设备和屏幕尺寸上都能正常工作

在之前添加以上代码

Datepicker.prototype = {...}

这就是解决办法。并且在所有设备和屏幕尺寸上都能正常工作
谢谢，这很有意义，在几篇文档中看到了容器选项，我会试一试。如果有选项，请确保将其张贴在此处以供将来参考。：）可以，玩一些选择。当我找到可以工作的东西时将更新。@D3C0这方面有什么变化吗？
bootstrap-datepicker
插件支持“container”-
datetimepicker
还不支持吗？谢谢，很有意义，在几个文档中看到了container选项，我会尝试一下。如果有选项，请确保将其发布在此处以供将来参考。：）可以，玩一些选择。当我找到可以工作的东西时将更新。@D3C0这方面有什么变化吗？
bootstrap-datepicker
插件支持“container”-
datetimepicker
仍然不支持吗？做得好！这是可以很容易地添加到我正在使用的任何现有插件中的东西。如果你在github上搜索引导程序插件，你会发现很多东西缺少这个引导程序核心插件固有的选项。谢谢谢谢终于在你的帮助下实现了。。在花了很多时间尝试不同的东西之后。干得好！这是可以很容易地添加到我正在使用的任何现有插件中的东西。如果你在github上搜索引导程序插件，你会发现很多东西缺少这个引导程序核心插件固有的选项。谢谢谢谢终于在你的帮助下实现了。。在花了很多时间尝试不同的事情之后。datepicker（“地点”）是完美的！谢谢^^ datepicker（“地点”）太完美了！谢谢^^