Angular5中@nicky-lenaers/ngx-scroll-to服务方式无法滚动问题排查

我来帮你梳理下这个服务调用无法滚动的常见原因，结合你给出的代码，大概率是选择器格式或者元素匹配的问题：

• 选择器格式错误（最可能的原因）
  你代码里的container: 'custom-container'和target: 'destination'缺少了CSS选择器的标识符号：

  • 如果目标元素是ID选择器，需要在前面加#，比如目标元素的id="destination"，那应该写target: '#destination'
  • 如果容器是类选择器，需要加.，比如class="custom-container"，则写container: '.custom-container'
    组件的ScrollToService是通过CSS选择器查找元素的，缺少符号的话会找不到对应DOM节点，自然无法触发滚动。

• 服务注入与模块配置问题
  确认你已经完成了这两步：

  1. 在组件构造函数中正确注入服务：

     constructor(private _scrollToService: ScrollToService) { }
     

  2. 在根模块（或当前模块）中导入ScrollToModule并初始化：

     import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
     
     @NgModule({
       imports: [
         // ...其他模块
         ScrollToModule.forRoot()
       ]
     })
     export class YourModule { }
     

• DOM元素未加载完成
  如果你的triggerScrollTo方法是在组件初始化早期（比如ngOnInit）调用的，目标元素可能还没渲染到DOM中。可以尝试：

  • 将调用逻辑移到ngAfterViewInit生命周期钩子中
  • 或者确保点击按钮触发时，容器和目标元素已经完全渲染

• 容器滚动属性未设置
  检查custom-container元素是否配置了滚动相关的CSS属性：

  #custom-container {
    height: 400px; /* 必须设置固定高度/最大高度 */
    overflow-y: auto; /* 开启垂直滚动 */
  }
  

  没有滚动条的容器，即使定位到目标元素也不会有滚动效果。

修正后的示例代码 #

public triggerScrollTo() {
  // 根据实际元素的选择器类型添加对应的符号
  const config: ScrollToConfigOptions = {
    container: '#custom-container', // 假设是ID选择器
    target: '#destination' // 假设是ID选择器
  };
  this._scrollToService.scrollTo(config);
}

如果还是无法解决，可以在调用前添加调试代码，确认元素是否存在：

public triggerScrollTo() {
  const container = document.querySelector('#custom-container');
  const target = document.querySelector('#destination');
  console.log('容器元素:', container);
  console.log('目标元素:', target);
  
  if (container && target) {
    const config: ScrollToConfigOptions = {
      container: '#custom-container',
      target: '#destination'
    };
    this._scrollToService.scrollTo(config);
  } else {
    console.error('未找到容器或目标元素');
  }
}

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