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

Question

我正在使用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

Answer 1

我建议你使用 alpine.js

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

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