引导选择大列表向下滚动页面（我不能使用最大高度/滚动条）

Posted 2023-05-08

【中文标题】引导选择大列表向下滚动页面（我不能使用最大高度/滚动条）

【英文标题】：Bootstrap Select large list scrolls the page down (I can't use max-height / Scrollbars)

【发布时间】：2021-10-17 22:48:36

【问题描述】：

我正在使用引导选择插件在我的一个项目中生成自定义下拉列表，但我遇到了一个非常关键的问题。下拉列表很大，当打开下拉列表时，屏幕会向底部移动/滚动一点，因此看不到前几个选项。

可以在此视频中看到问题： https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view

如果您想玩，请在此处查看滤色器： https://www.stylorita.com/new1/outfit-ideas.php

重要提示：我不能使用最大高度或为其添加滚动条进行修复，我必须在没有滚动条的情况下显示它。请问有人可以帮忙吗？

【参考方案1】：

如果我对您的理解正确，则无论出于何种原因，解决方案都不是滚动条，而是您希望下拉列表的第一个条目保持可见，对吗？

也许 JS scrollIntoView() 可能会有所帮助：如果您有机会将一个类应用到您的第一个列表条目，您可以在列表打开时使用 scrollIntoView（通常是在获得焦点或单击时的情况）。

您可以在此页面上找到 scrollIntoView 的简短描述：https://www.w3schools.com/jsref/met_element_scrollintoview.asp

【讨论】：

感谢您的回复，但我已经尝试了很多这些 jquery / javascript 修复，例如禁用滚动、向后滚动，但它并没有使用户友好。

如何在第一个列表项中隐藏输入或按钮并设置自动对焦？

不是真的，我想做的是添加一个禁用选项作为“选择颜色”以覆盖它向下滚动的空间。大声笑