Bootstrap Datepicker滚动问题答案

【问题标题】：Bootstrap Datepicker scrolling issueBootstrap Datepicker滚动问题
【发布时间】：2014-07-12 17:36:41
【问题描述】：

在我的网站上遇到一个奇怪的滚动问题，其中引导日期选择器日历不与它所连接的输入框保持一致。尽我所能在 jsfiddle 中重新创建它。（在框中用鼠标滚轮滚动，然后单击输入框以查看日历。）我知道它没有出现在前面，但这不是问题，它只是为了娱乐目的。您会注意到它无法正确滚动输入框，这是我试图修复的。

我原来的代码是：

 $(".datepicker-input").each(function(){ $(this).datepicker();});

HTML：

<input type="text" class="datepicker-input" />

脚本：

    var datePicker = $().datepicker({});
    var t;
    $(window).on('DOMMouseScroll mousewheel scroll', function() {
        window.clearTimeout(t);
        t = window.setTimeout(function() {
            $('.datepicker-input').datepicker('place');
        }, 100);
    });

CSS：

html,body {
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
}

.datepicker-input {
    margin-top: 250px;
    margin-left: 100px;
}

.dropdown-menu {
    font-size: 13px;
    margin-left: 20px;
}

链接到 jsfiddle：http://jsfiddle.net/8C6jT/1/（感谢 A. Wolff）

编辑：

这个功能在 Chrome 和 IE 中是有效的。如果滚动太快，它仍然会导致日历从输入框移开，但它不适用于 Firefox。

【问题讨论】：

为什么是$().datepicker({});？
修复了 jsFiddle 复制问题（例如使用鼠标滚轮）：jsfiddle.net/8C6jT/1
这个超时的目的是什么？？？
我在关注这个例子：stackoverflow.com/questions/20488734/…
@zen_1991 好的，那是有道理的。在这种情况下设置身体高度将解决它：jsfiddle.net/8C6jT/2 现在我想知道为什么min-height 在这种情况下不起作用？！

标签： jquery html css twitter-bootstrap datepicker

【解决方案1】：

我不知道为什么，但是定位是基于滚动的，所以你需要在 bootstrap-datepicker.js 中找到这段代码

scrollTop = $(this.o.container).scrollTop();

并将其重写为

scrollTop = 0;

之后它将保留输入。不知道它是否是最好的解决方案，但由于跨浏览器和设备支持，使用滚动事件来修复它应该不是最好的。

【讨论】：

【解决方案2】：

像这样使用你的 CSS..

html, body {
    overflow-x: hidden;
    position: fixed;
    min-height: 1000%;
}
.datepicker-input {
    margin-top: 250px;
    margin-left: 100px;
}
.dropdown-menu {
    font-size: 13px;
    margin-left: 20px;
}

【讨论】：

【解决方案3】：

试试这个：

html, body {
    position: relative;
    min-height: 1000%;
    height: auto;
}

希望这会有所帮助

【讨论】：

有JS是后台控制HTML和Body周围的事件，这样会失效。