从下拉列表中选择选项后，页面会自动滚动/移动

Posted 2023-02-15

【中文标题】从下拉列表中选择选项后，页面会自动滚动/移动

【英文标题】：The page automatically scrolls/moves after selecting an option from dropdown

【发布时间】：2022-01-17 04:51:53

【问题描述】：

我正在使用rails 编码并使用 Stimulus 连接视图和 javascript。对于处理下拉菜单，我使用的是choices.js，它是一个旧库并且不支持atm。我目前遇到的问题是，当我从下拉列表中选择一个选项时，而 part of 下拉列表不在屏幕上，该选项被选中并且页面自动向下滚动。在我看来，当一半的选项从屏幕底部消失并且我选择顶部选项时，浏览器会向下滚动以显示/适合下一次的整个下拉列表！更清楚地说，滚动后，如果我再次单击下拉菜单，则整个列表都是可见的。这种自动滚动对我来说并不可取。我尝试在choice 事件上添加回滚功能，但没有成功。我想知道是否有任何 css 或 javascript 解决方案。

before selecting the option

after selecting the option the screen scrolls down and when I click on dropdown the whole dropdown's options can be seen

【参考方案1】：

我建议你使用 alpine.js

这样您就可以使用所有基本的（甚至有些高级的）交互而无需太多代码。

结合 Tailwind CSS2，您将拥有一个很好的组合。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。