滚动到没有 jQuery 的活动手风琴面板答案

【问题标题】：Scroll to active accordion panel without jQuery滚动到没有 jQuery 的活动手风琴面板
【发布时间】：2017-06-27 14:41:54
【问题描述】：

情况： 我在一个由地图和侧边栏组成的 Web 应用程序上工作。在侧边栏中，手风琴带有 20 个面板。当用户在地图上选择一个点时，相关的手风琴面板就会打开。

问题： 当用户选择一个点时，不仅面板应该打开，而且应该滚动到激活的面板。

我已经尝试过的： 我已经寻找了几个小时的解决方案，但是建议的解决方案可以使用 jQuery（我不能使用）或者基于 html 元素的 ID 的不同滚动选项，比如我不能使用的 document.getElementById('id').scrollIntoView(); ，因为面板是具有类而不是 id 属性的 div 元素。我尝试对 document.getElementsByClassName() 使用 scrollIntoView() 选项，但没有成功。

代码： 我处理 html、css 和 JavaScript 代码，我不使用 jQuery。我实现的手风琴在一个带有 id（“描述”）的 div 中，手风琴本身由标题 <button class="accordion"> 和面板 <div class="accordion-panel"> 组成。

问题： 知道如何滚动到特定的 div 元素（来自 20 个 div 元素，它们都属于同一个类，但可以通过它们的特定 ID/编号（不是 html id 属性）来解决）？

【问题讨论】：

标签： javascript html accordion

【解决方案1】：

我假设您有一个说明哪个手风琴面板处于活动状态的类。如果这是真的，那么这个解决方案应该可以工作。否则，请发布您拥有的一些 HTML。

要获得所需的元素，您应该使用getElementsByClassName，它接受多个类：

document.getElementsByClassName('accordion-panel active')

如果您确定只有其中一个元素，您应该能够执行以下操作：

document.getElementsByClassName('accordion-panel active')[0].scrollIntoView()

【讨论】：

非常感谢，成功了！！！正如我通过点击点的 ID 知道应该激活哪个面板，我可以使用 document.getElementsByClassName('accordion-panel')[theID].scrollIntoView(); 向下滚动到它。
不错！如果它对您有帮助，您可以随时将此答案设置为接受，以便将来对其他人有所帮助！非 jQuery 编程祝你好运，非常棒！