ember.js 由于延迟加载的组件,无法正确使用scrollIntoView

pokxtpni  于 2023-02-15  发布在  其他
关注(0)|答案(1)|浏览(110)

我在使用.scrollIntoView时遇到了一个问题,我怀疑这是由于延迟加载的组件。当页面向下滚动时,这些延迟加载的组件被加载并增加页面高度,改变了我想滚动到视图中的元素的位置。
有什么方法可以在不改变延迟加载组件的加载方式的情况下解决这个问题吗?
我用的代码很简单

this.goToPageElement('#page-anchor', 'center');

goToPageElement(element, position) {
    const target = document.querySelector(element);
    target.scrollIntoView({
      behavior: 'smooth',
      block: position,
    });
  }
lnxxn5zx

lnxxn5zx1#

对于任何面临这个问题的人,我们通过向lazyLoaded组件 Package 器添加静态高度来解决它。对于具有可变高度的组件,我必须选择一个平均高度,然后根据屏幕大小更改高度。这在Tailwinds一次性类中非常容易做到。

<LazyLoaded class="h-[400px] lg:h-[250px]">

相关问题