从列表底部开始溢出滚动，而不是顶部？答案

【问题标题】：Overflow scroll starting at bottom of list, not top?从列表底部开始溢出滚动，而不是顶部？
【发布时间】：2018-05-07 06:55:21
【问题描述】：

我正在使用SelectBoxIt 来设置选择列表的样式。我们有需要滚动的长列表，我按照“长列表”的说明向容器添加了最大高度。但是，当您单击下拉列表时，列表从底部而不是顶部开始？

单击选择时如何强制列表从顶部开始？

这是指向该网站的链接https://preto.wpengine.com

如果您向下滚动页面以预订餐桌并单击位置或否。的人选择你会看到他们打开并从底部开始向上滚动列表而不是向下滚动。

【问题讨论】：

我在这个页面上有相同的表格，没关系。我认为这与表格在页面下方的距离有关。如果我将表单移动到主页的顶部，它也可以。 preto.wpengine.com/book-a-table
我无法重现该问题，抱歉...
所以当您单击选择位置时，您会看到 camden 并且可以向下滚动列表？
是的，完全正确 :) 我使用的是 Firefox Quantum - Mac OS
这很奇怪，对我来说它也在 Firefox 的底部。其他一些人已经对其进行了测试，并且都一样。当您在主页上打开它们时，它会跳到底部选项...

标签： jquery html css drop-down-menu selectboxit

【解决方案1】：

问题是您的选择选项字段自然会在选择字段上方打开，因为它们有空间可以这样做。 SelectBoxIt 必须使用它来生成元素的方向。如果您打开控制台并单击<section id="book-a-table"></section> 并将节点拖到页面上方（标题上方），您将能够看到它正常工作。这是因为期权现在有向下打开的空间。

不幸的是，根据我的阅读，没有好的方法可以强制选择字段打开的方向适用于所有浏览器，如您所见here.

所以我可能会建议尝试一些解决方法。尝试为 g-form-wrapper 等选择字段的父级添加较大的高度。大到足以让它们落下。然后在该元素book-a-table 的父元素上添加一个较小的高度并将其溢出设置为隐藏以进行补偿。

希望对你有帮助！

【讨论】：