引导日期选择器上的棘手问题
Posted
技术标签:
【中文标题】引导日期选择器上的棘手问题【英文标题】：Sticky issue on bootstrap datepicker 【发布时间】：2018-01-14 09:20:11 【问题描述】：我在一个网站上使用bootstrap datepicker，它还通过给它的父级一个固定的位置来设置为粘性，它工作正常但是在 Ipad 和 Iphone 上测试它（尚未在安卓设备上测试），当我向下滚动并尝试触摸日期选择器将其打开，它会滚动回页面顶部，我该如何解决这个问题？
当我使用自定义下拉菜单Selectric时出现类似问题
我已经创建了问题here 的简单条带化版本。请注意，该问题不会在模拟器上复制，而是在实际的移动设备或 ipad 上复制。
【问题讨论】：
这可能是因为您的datepicker-parent 具有position: fixed 的样式。我认为你应该能够在没有它的情况下工作。
但我希望它粘在顶部。
您能解释一下您的问题吗？我用 ipad 查过，但不明白你的问题。
@UmeRonaldo 您正在使用旧版本的引导日期选择器。打开它的 javascript 文件，它是在 2012 年创建的，尝试使用他们 github 上的最新版本。
链接好像坏了？
【参考方案1】：
我也遇到了同样的问题，解决方法如下，你可以试试。 datepicker 具有 beforeShow 属性，您必须在其中设置日历位置。
$("#EffectiveDateAccept").datepicker(
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst)
var calendar = inst.dpDiv;
setTimeout(function ()
calendar.position(
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
);
, 1);
);
【讨论】：
【参考方案2】：试试这个
.dropdown-menu
position: fixed!important
【讨论】：
【参考方案3】：发现此问题与特定环境无关（不限于ios），解决方法如下：
您应该找出哪个 datepicker div 类实际上将 datepicker 从隐藏设置为可见（其中哪些会在成功显示和隐藏事件时更改）。
为该类（此处为模态打开）添加缺少的显示命令：
body.modal-open
overflow: visible;
现在滚动条应该留在原地。
例子指的是html如：
<body>
<div class="modal-open">
Datepicker
</div>
</body>
来源：
Bootstrap modal: background jumps to top on toggle
附言。如果这看起来太 hacky，我的来源还有 18 个其他选项。
我曾经做过这个现在的，工作起来很有魅力，而且做起来并不难。
【讨论】：
日期选择器打开时没有附加到正文的类，它通过在正文末尾附加一组html来工作，并且正文没有样式更改。【参考方案4】：只需将此 CSS 代码添加到您的网站即可解决该问题。
.element
position: sticky!important;
【讨论】：
【参考方案5】：如果您在 Inspect Element 中查看它，它会在 HTML 中创建一个单独的 DIV，其位置为 absolute。只需将该位置更改为sticky。这就是为什么会发生这种情况。如图所示。
您可以通过添加这行 CSS 代码来做到这一点：
.dropdown-menu
position: sticky;
希望对你有帮助
【讨论】：
现在试过了，但问题没有解决，我也在父 datepicker-parent 上试过。两个新测试都以名称 test2.html 和 test3.html 上传 让我检查一下 你想把它设置在顶部吗？如果你想要它，那么你需要在滚动时添加 JavaScript，然后将这些 css 添加到日期选择器 div 让我知道你是否不能这样做【参考方案6】：您可以使用用户内联样式
position : fixed !important;
或
position: sticky !important;
否则，您可以在任何合适的下拉类或其父类中使用相同的样式。
【讨论】：
【参考方案7】：首先，您是否查看了 GH 回购的问题以找到与您的描述相符的内容？
这个链接听起来很有希望：
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866我认为可能发生的情况是您的日期选择器设置为绝对的主体，而不是您设置为“固定”的父级。
因此，当您单击打开日期选择器时，您的移动设备会将您滚动到活动元素（在本例中，日期选择器位于顶部，在父项上设置为绝对值）。
似乎还有一些与滚动相关的默认移动行为：
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling也许设置以下会有所帮助：
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
以下链接提供了有关此滚动行为的更多上下文：
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content【讨论】：
@Baum mit Augen - 谢谢，我试图改进我的答案。如果需要做更多工作，请告诉我。以上是关于引导日期选择器上的棘手问题的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Android 原生 HTML5 日期选择器上的 Chrome 变得非常慢？