防止位置绝对元素在可滚动div内滞留

在多个项目（例如颜色选择器，日期选择器和时间选择器）出现此问题时，当它们弹出并因此相对于输入绝对定位时，如果用户滚动新生成的元素也随之移动。基于大多数插件的性质（所有主要的引导插件，我已经注意到了这一点）我试图想到一种方法来定位并保持这些元素相对于其原始位置固定，而不会在可能的情况下攻击每个插件。防止位置绝对元素在可滚动div内滞留

下面是我使用引导日期选择器的问题的一个示例。点击输入生成日期选择器，然后滚动并注意日期选择器保持相对于屏幕而不是输入。

链接的jsfiddle：http://jsfiddle.net/GuJR6/1/

谢谢！

.container { 
    margin-top: 15px; 
    height:400px; 
    overflow-y: scroll; 
} 
.scrolling-content { 
    height:1000px; 
} 

<div class="container"> 
    <div class="scrolling-content"> 
     <div class="well text-center"> 
      <input type="text" class="datetimepicker" readonly> 
     </div> 
    </div> 
</div> 

$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

来源

2014-02-16 d3c0y

我只是forked bootstrap-datetimepicker并加入由Jan Peapke的container选项提。您可以使用它像这样：

$(selector).datetimepicker({ container: nativeDOMElement }); 
$(selector).datetimepicker({ container: jQueryObject }); 
$(selector).datetimepicker({ container: jQuerySelector });

这样就可以解决你的问题：

在你的CSS：

.scrolling-content { 
    position: relative; 
}

比较：CSS-Tricks

$(".datetimepicker").datetimepicker({ 
     format: 'yyyy-mm-dd hh:ii', 
     container: '.scrolling-content' 
    });

小提琴

http://jsfiddle.net/marionebl/GuJR6/2/

在小提琴的第一个输入应用解释为修复您的问题。第二个应该像以前一样。

来源

2014-02-16 05:10:30 marionebl

不错的工作！这是可以轻松添加到我使用的任何现有插件的东西。如果你为自举插件操纵github，你会发现很多遗漏了bootstrap核心插件本身的选项。谢谢！ – d3c0y

谢谢。最后，在花了很多时间尝试不同的事情之后，在你的帮助下工作。 – IJR

恐怕问题在于bootstrap datetimepicker本身。
而不是将它连接到与输入相同的容器，它被连接到身体。

我抬头看文档，看看是否有设置父项的选项，但恐怕没有。

作为解决方案，您可以尝试其他框架，如jQueryUI或this plugin。

您也可以尝试通过将点击处理程序附加到输入字段来手动更正选取器的位置，该处理程序将日期选择器从正文中移除，将其添加到scrollcontainer的内容并使用事件鼠标坐标来定位它正确地在容器内。似乎很麻烦。 :)

问候， Ĵ

来源

2014-02-16 02:30:41

谢谢，有道理，看到几个文档中的容器选项，我会给它一个去。 – d3c0y

如果有一个选项，请确保在这里发布以备将来参考。 :) –

会这样做，玩几个选项。当我找到可以工作的东西时会更新。 – d3c0y

即使我一直面临着这个问题。找到了解决方案通过添加var t;

$('YOURCLASSNAME').on('scroll', function() { 
     var $this = $('.input-group.date'); 
     window.clearTimeout(t); 
     t = window.setTimeout(function() { 
      $this.datepicker('place'); 
     }, 50) 
    });

添加上述代码if (showFocus) this.show(); 后在此块变种日期选择=函数（元素，选项）{....} 自举-datepicker.js插件

来源

2014-11-18 11:45:00

$('YOURCLASSNAME').on('scroll', function() { 
     var $this = $('.input-group.date'); 
     $this.datepicker('place'); 
    });

添加上述代码前

Datepicker.prototype = {...}

这是解决方案。并在所有设备和屏幕尺寸上正常工作

来源

2015-01-30 07:21:00

datepicker（'地方'）是完美的！谢谢^^ – Chicna

防止位置绝对元素在可滚动div内滞留

回答

相关问题