Question

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

基于大多数插件的性质（我已经注意到的所有主要引导插件都是这样做的）我试图想出一种方法来定位并保持这些元素相对于其原始位置是固定的，而不是每次攻击如果可能的插件。

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

链接到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'
     });

<强>小提琴

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

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

相关提款请求

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

Answer 2

我担心问题在于引导日期时间选择器本身它不是将它附加到与输入相同的容器中，而是附着在身体上。

我查看了文档以查看是否有设置父级的选项，但我担心没有。

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

您还可以尝试通过将单击处理程序附加到输入字段来手动更正选择器的位置，该输入字段从主体中删除日期选择器，将其添加到scrollcontainer的内容并使用事件鼠标坐标来正确定位它在容器内。虽然看起来很麻烦。：）

的问候， Ĵ

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();之后添加以上代码在这个街区 var Datepicker = bootstrap-datepicker.js插件的

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

4 个答案: