ScrollTo无法滚动至顶部求助：仅debugger模式下功能生效

• 点击事件触发后调用scrollToTop()方法尝试将目标div滚动到顶部，仅当代码中加入debugger关键字暂停执行时功能正常，无debugger时滚动失效
• 已确认目标元素存在，本地代码无报错，但滚动功能不生效
• 最简可运行示例存在两个额外问题：
  1. 点击列表最后一项无法触发切换功能
  2. 点击后控制台报错：peError: Cannot read properties of null (reading 'scrollTo')

相关代码 #

scrollToTop方法 #

scrollToTop(){
  console.log(this.shadowRoot.querySelector(".results"))
  return this.shadowRoot.querySelector("results").scrollTo(0, 0);
}

调用逻辑 #

switch(args){
      case "desc":
        this.active = [...this.active.reverse()];
        this.scrollToTop();
        //debugger 
        //添加debugger并暂停代码时功能正常，无则失效
        break;
}

1. DOM更新异步性：Lit组件修改this.active这类属性后，会触发异步重渲染。直接调用scrollToTop时，DOM可能还未完成更新，此时滚动操作无法作用到最新的DOM结构；而debugger暂停执行时，异步更新已完成，所以功能正常。
2. 选择器错误（示例报错原因）：scrollToTop方法中使用querySelector("results")，这是标签选择器，但目标元素是类名为results的div，应该使用类选择器.results，导致示例中找不到元素报错。
3. 点击事件绑定问题（示例切换失效原因）：示例中最后一项的点击事件绑定写法不符合Lit语法，无法正确触发toggle方法。

1. 修复选择器错误 #

修正scrollToTop方法中的选择器，同时添加可选链避免潜在报错：

scrollToTop(){
  const resultsEl = this.shadowRoot.querySelector(".results");
  console.log(resultsEl);
  return resultsEl?.scrollTo(0, 0);
}

2. 等待DOM更新完成后执行滚动 #

利用Lit提供的updateComplete Promise，等待组件完成DOM更新后再执行滚动操作：

方案一：使用then链式调用 #

switch(args){
  case "desc":
    this.active = [...this.active.reverse()];
    this.updateComplete.then(() => {
      this.scrollToTop();
    });
    break;
}

方案二：使用异步函数 #

async handleSwitch(args){
  switch(args){
    case "desc":
      this.active = [...this.active.reverse()];
      await this.updateComplete;
      this.scrollToTop();
      break;
  }
}

3. 修复示例中的点击切换功能 #

调整最后一项的点击事件绑定，和其他列表项保持一致：

<li><a href="#" @click=${() => { this.toggle(); this.scrollToTop(); }}>Olive</a></li>

内容的提问来源于stack exchange，提问作者localhost