在这种情况下,我需要将元素滚动到视口中.问题是我不知道哪个元素是可滚动的.例如,在"肖像"中,主体是可滚动的,而在"风景"中,它是另一个元素(并且有更多的情况会改变可滚动元素)

现在的问题是,给定一个需要滚动到视口中的元素,找到其第一个可滚动父元素的最佳方法是什么?

我已经设置了一个演示here.使用该按钮,您可以在两种不同的情况之间切换

<div class="outer">
    <div class="inner">
        <div class="content"> 
            ...
            <span>Scroll me into view</span>
        </div>
    </div>
</div>

正文是可滚动的或.outer

有什么建议吗?

推荐答案

只需判断滚动条是否可见,如果不可见,请查看父级.

function getScrollParent(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

Css相关问答推荐

单独.css文件中的样式不适用于Angular 元件

下拉菜单未展开- bootstrap

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

禁用MUI DataGrid上的悬停效果

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

背景图像允许溢出输入按钮

如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

Angular 以Angular 获取当前聚焦的元素

热门制作渐变半红/半蓝?

为什么 flexbox 中的 在应用居中时不会调整大小?

创建一条淡出/在各个方向变得透明的线

如何让 Firefox 在文件更改时自动刷新?

在 css 中使用 FontAwesome 或 Glyphicons :before

如何在渲染之前获取react 组件的大小(高度/宽度)?

矩形图像的 CSS 圆形裁剪

让 div 扩展全高

名称-值对的语义和 struct

如何使用 CSS 消除元素的偏移量?

:before 和 ::before 有什么区别?

html元素(div)的全高,包括边框,填充和边距?