NextJS中smoothscroll平滑滚动polyfill在Safari不生效如何解决

• 强制覆盖变量设置顺序错误：你当前代码先执行smoothscroll.polyfill()再设置window.__forceSmoothScrollPolyfill__ = true，该变量需要在调用polyfill前赋值才能生效，导致你要求强制覆盖原生实现的逻辑没有被polyfill读取到。
• Safari原生实现存在缺陷：Safari 15.4及以上版本虽然原生支持behavior: smooth参数，但仅对window级滚动生效，普通DOM元素调用scrollTo时平滑参数不会生效。polyfill默认检测到浏览器存在原生实现就不会注入兼容代码，所以必须强制触发全量覆盖才能兼容元素级滚动。

1. 调整_app.js中polyfill的执行逻辑，优先设置强制覆盖变量再调用polyfill：

import smoothscroll from 'smoothscroll-polyfill'; // 保持在文件顶部导入

if (typeof window !== "undefined") {
  // 先设置强制polyfill变量
  window.__forceSmoothScrollPolyfill__ = true;
  // 再执行polyfill注入
  smoothscroll.polyfill();
  console.log('polyfilled');
}

2. 验证执行结果：修改后在Safari控制台选中你的滚动元素，打印element.scrollTo，如果返回的是polyfill封装的函数而非原生函数，说明覆盖已生效。
3. 滚动逻辑延后执行：如果你的滚动逻辑在组件首次渲染时同步触发，可包裹在useEffect回调中，确保polyfill注入完成后再执行：

import { useEffect } from 'react';

function YourScrollComponent() {
  useEffect(() => {
    const targetElement = document.querySelector('#your-scroll-target');
    targetElement?.scrollTo({
      left: 200,
      behavior: 'smooth'
    });
  }, []);

  // 其余组件逻辑
}

4. NextJS 13+ App Router适配：如果你使用的是App Router模式，需要在根layout.js或引入polyfill的文件顶部添加'use client'指令，确保代码仅在客户端执行。
5. 排查CSS冲突：检查是否存在全局scroll-behavior: auto配置，该配置会覆盖JS的平滑滚动参数，可针对性移除或针对滚动元素单独设置scroll-behavior: smooth。

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