Question

我在网站上使用bootstrap datepicker，它也通过给它的父母一个固定的位置设置为粘性，它的工作正常，但在Ipad和Iphone上测试它（尚未在andriod设备上测试），当我向下滚动并尝试触摸日期选择器以打开它时，它会滚动回到页面顶部，我该如何解决这个问题？

当我使用自定义下拉列表Selectric

时，会出现类似的问题

我创建了问题here的简单条纹版本。请注意，问题不会在模拟器上复制，而是在实际的移动设备或ipad上复制。

Answer 1

试试这个

.dropdown-menu{
position: fixed!important
}

Answer 2

此问题与特定环境（不仅仅是iOS）无关，并且具有以下解决方案：

您应该找出哪个datepicker div类实际上将datepicker从隐藏设置为可见（在成功显示和隐藏事件时哪些更改）。

添加到该类的css（此处为modal-open）缺少的show命令：

body.modal-open {
    overflow: visible;
}

现在滚动应该保持原位。

示例引用html，如：

<body>
      <div class="modal-open">
            Datepicker
      </div>
</body>

来源：

Bootstrap modal: background jumps to top on toggle

PS。我的消息来源还有18个其他选项，如果这看起来太过分了。

我曾经做过这一次，像魅力一样工作，并没有那么棘手。

Answer 3

如果你在Inspect Element中查看它，它会在HTML中创建一个单独的DIV，其位置为absolute。只需将该位置更改为sticky即可。这就是为什么会发生这种情况。见图。

您可以通过添加以下CSS代码来完成此操作：

.dropdown-menu {
  position: sticky;
}

希望能帮到你

Answer 4

只需将此CSS代码添加到您的网站即可解决该问题。

.element{
position: sticky!important;
}

Answer 5

我也面临同样的问题并解决了以下解决方案，你可以尝试一下。 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);
        }
    });

Answer 6

您可以使用内联样式

forward

OR

position : fixed !important;

否则，您可以在任何合适的下拉类或其父类中使用相同的样式。

Answer 7

首先，您是否看过GH repo的问题以找到符合您描述的内容？

这个链接特别有希望：

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

关于bootstrap datepicker的粘性问题

7 个答案: