在我的网站上遇到一个奇怪的滚动问题,其中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不起作用,它仍会导致日历从输入框移开.