引导日期选择器上的棘手问题答案

【问题标题】：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 上的最新版本。
链接好像坏了？

标签： css datepicker css-position sticky bootstrap-datepicker

【解决方案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 - 谢谢，我试图改进我的答案。如果需要做更多工作，请告诉我。