Css 引导数据采集器上的棘手问题_Css_Datepicker_Css Position_Sticky_Bootstrap Datepicker

Css 引导数据采集器上的棘手问题

css

Css 引导数据采集器上的棘手问题,css,datepicker,css-position,sticky,bootstrap-datepicker,Css,Datepicker,Css Position,Sticky,Bootstrap Datepicker,我在一个网站上使用，它也被设计成粘性的，给它的父母一个固定的位置，它正常工作，但在Ipad和Iphone上测试它（还没有在andriod设备上测试），当我向下滚动并试图触摸日期选择器打开它时，它会滚动回页面顶部，我如何解决这个问题当我使用自定义下拉列表时，也会出现类似的问题我已经创建了这个问题的一个简单的分条版本。请注意，问题不会在emulator上重现，而是在实际的移动设备或ipad上重现。试试这个 .dropdown-menu{ position: fixed!important }

我在一个网站上使用，它也被设计成粘性的，给它的父母一个固定的位置，它正常工作，但在Ipad和Iphone上测试它（还没有在andriod设备上测试），当我向下滚动并试图触摸日期选择器打开它时，它会滚动回页面顶部，我如何解决这个问题

当我使用自定义下拉列表时，也会出现类似的问题

我已经创建了这个问题的一个简单的分条版本。请注意，问题不会在emulator上重现，而是在实际的移动设备或ipad上重现。

试试这个

.dropdown-menu{
position: fixed!important
}

发现此问题与特定环境（不仅仅是iOS）无关，其解决方案如下：

您应该找出哪个datepicker div类将datepicker实际从隐藏设置为可见（在成功显示和隐藏事件后，它们中的哪一个会发生更改）

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

body.modal-open {
    overflow: visible;
}

现在卷轴应该保持在原位

示例引用html，如：

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


日期选择器

资料来源：

另外，我的消息来源还有18个其他选择，如果这看起来太黑的话

我已经做过一次当前的一个，工作起来很有魅力，也没有那么棘手。

如果您在Inspect元素中查看它，它将在HTML中创建一个单独的DIV，其中包含position

absolute

。只需将该位置更改为粘性。这就是为什么会发生这种情况。在图中看到

您可以通过添加这行CSS代码来实现这一点：

.dropdown-menu {
  position: sticky;
}

希望这将对您有所帮助

作为一个开始，您是否查阅了GH回购协议的问题，以找到与您描述相符的内容

这个链接听起来特别有希望：

我认为可能发生的情况是，您的日期选择器设置为身体的绝对值，而不是您设置为“固定”的父对象

因此，当您单击打开日期选择器时，您的移动设备会将您滚动到活动元素（在本例中，顶部的日期选择器在父级上设置为绝对）

此外，似乎还有一些与滚动相关的默认移动行为：

也许设置以下内容会有所帮助：

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

以下链接提供了有关此滚动行为的更多上下文：

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

.element{
position: sticky!important;
}

我也遇到了同样的问题，解决方法如下，你们可以试试。 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);
        }
    });

您可以选择用户内联样式

position : fixed !important;

或

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

这可能是因为您的

日期选择器父类具有样式位置：fixed。我想你应该可以不用它工作。但我希望它粘在上面。你能解释一下你的问题吗？我用ipad检查了一下，但不明白你的问题。@umeconaldo你使用的是旧版本的bootstrap日期选择器。打开它的JavaScript文件，该文件创建于2012年，尝试使用他们github的最新版本。链接似乎已断开？打开日期选择器时，正文没有附加任何类，它通过在正文末尾附加一组html来工作，正文没有样式更改。现在尝试了，但问题没有解决，我也在家长日期选择器家长身上试用过。这两个新测试都上传了名称test2.html和test3.htmlet me check it是否要将其设置在顶部？如果您需要它，那么您需要在滚动时添加JavaScript，然后将这些css添加到日期选择器div。如果您不能这样做，请告诉我it@Baum麻省理工学院奥根分校-谢谢，我已经尝试改进我的答案。如果需要做更多的工作，请告诉我。
position: sticky !important;