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

Question

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

基于大多数插件的性质（我注意到所有主要的自举插件都这样做），我正在尝试一种方法来定位和相对于其原始位置固定这些元素，而不会尽可能地破解每个插件。

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

链接到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

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

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

这样可以解决您的问题：

在您的CSS中：

.scrolling-content {
    position: relative;
}

比较： CSS技巧

JS

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

小提琴

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

提琴中的第一个输入将为您的问题应用已解释的修复程序。 第二个应该表现得像以前一样。

相关拉取要求

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

Answer 2

恐怕问题出在引导日期时间选择器本身。
而不是将其与输入附加到同一容器，而是将其附加到主体。

我查看了文档，以查看是否可以设置父项，但恐怕没有。

作为解决方案，您可以尝试其他框架，例如jQueryUI或this plugin 。

您也可以尝试通过在输入字段上附加一个单击处理程序来手动纠正选择器的位置，该输入处理程序将从主体中删除日期选择器，将日期选择器添加到scrollcontainer的内容中，并使用事件鼠标坐标将其正确放置在容器中。 似乎有很多麻烦。 :)

问候，J

Answer 3

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

在上面添加以上代码

Datepicker.prototype = {...}

这是解决方案。 并能在所有设备和屏幕尺寸上正常运行

Answer 4

甚至我都一直面临这个问题。 通过添加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();之后添加以上代码if (showFocus) this.show(); 在此块中var Datepicker = bootstrap-datepicker.js插件的功能（元素，选项）{....}