Bootstrap Datepicker滚动问题

zen*_*991 5 html css jquery datepicker twitter-bootstrap

在我的网站上遇到一个奇怪的滚动问题,其中bootstrap datepicker日历不会与其附加的输入框保持一致.我试着用jsfiddle重新创造它.(在框中滚动鼠标滚轮,然后点击输入框查看日历.)我知道它不会出现在前面,但这不是问题,它只是为了娱乐目的.你会注意到它没有正确地滚动输入框,这是我试图解决的问题.

我原来的代码是:

 $(".datepicker-input").each(function(){ $(this).datepicker();});
Run Code Online (Sandbox Code Playgroud)

HTML:

<input type="text" class="datepicker-input" />
Run Code Online (Sandbox Code Playgroud)

脚本:

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

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;
}
Run Code Online (Sandbox Code Playgroud)

链接到jsfiddle:http://jsfiddle.net/8C6jT/1/(感谢A. Wolff)

编辑:

此功能是Chrome和IE中的一些有效功能..如果你滚动得太快但它对Firefox不起作用,它仍会导致日历从输入框移开.

小智 -1

尝试这个:

html, body {
    position: relative;
    min-height: 1000%;
    height: auto;
}
Run Code Online (Sandbox Code Playgroud)

希望这会有所帮助