WordPress Elementor水平滚动页面锚点链接无法自动滚动求助

问题现状 #

使用Elementor Pro制作水平滚动页面，已实现鼠标滚轮触发水平滚动，但指向区块#section-CSSid的锚点链接（含文本框内链接、WordPress全局菜单链接）在当前页面点击无法自动滚动，仅在新窗口打开时正常跳转。

现有代码 #

页面端CSS代码 #

.elementor-section-wrap{ 
    display: inline-flex;
 }

.elementor-section{ 
    width: 100vw;
 }

.header {width: 5vw; }

@media(min-width:770px){
    body{
        overflow-y: hidden;
        overscroll-behavior-y: none;
        scroll-behavior: smooth;
    }
    #margin {
        width: calc(100% - 118px)
    }
}

@media(max-width:770px){
    .elementor-section-wrap{
        display:block;
    }
}

Elementor自定义JS代码 #

function replaceVerticalScrollByHorizontal( event ) {
  if ( event.deltaY !== 0 ) {
   window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
   event.preventDefault();
  }
}

const mediaQuery = window.matchMedia( '(min-width: 770px)' );

if ( mediaQuery.matches ) {
  window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
}

修复方案 #

默认锚点跳转基于垂直滚动逻辑，需拦截锚点点击事件，改为计算目标区块的水平偏移量并执行水平滚动。修改后的JS代码如下：

function replaceVerticalScrollByHorizontal( event ) {
  if ( event.deltaY !== 0 ) {
   window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
   event.preventDefault();
  }
}

// 处理锚点链接点击
function handleAnchorClick(e) {
  const targetId = this.getAttribute('href');
  // 仅处理当前页面的锚点链接
  if (targetId.startsWith('#') && targetId !== '#') {
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      e.preventDefault();
      // 计算目标元素相对于视口的水平偏移
      const targetScrollX = targetElement.offsetLeft;
      // 执行平滑水平滚动
      window.scrollTo({
        left: targetScrollX,
        behavior: 'smooth'
      });
    }
  }
}

const mediaQuery = window.matchMedia( '(min-width: 770px)' );

if ( mediaQuery.matches ) {
  window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
  // 给所有锚点链接绑定点击事件
  document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', handleAnchorClick);
  });
}

// 处理页面加载时的锚点（比如直接访问带锚点的URL）
window.addEventListener('load', () => {
  if (mediaQuery.matches) {
    const hash = window.location.hash;
    if (hash) {
      const targetElement = document.querySelector(hash);
      if (targetElement) {
        const targetScrollX = targetElement.offsetLeft;
        window.scrollTo({
          left: targetScrollX,
          behavior: 'smooth'
        });
      }
    }
  }
});

注意事项 #

• 确保目标区块的CSS ID与锚点链接的href完全匹配（区分大小写）
• 若页面存在动态加载的锚点链接，需在元素加载完成后重新绑定handleAnchorClick事件
• 移动端（<770px）已恢复垂直布局，锚点跳转将自动使用默认逻辑

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