本地WordPress站点中scrollLeft JS功能点击无响应问题咨询

Codepen运行正常是因为其为独立隔离环境，没有WordPress自带资源和主题样式的冲突，两边表现不一致为环境差异导致，按以下步骤修复即可：

1. 移除重复引入的jQuery资源 #

WordPress默认已内置jQuery库，你HTML代码中手动引入的jQuery资源完全多余，直接删掉即可，重复引入会导致jQuery实例冲突。

2. 替换JS代码 #

你现有逻辑全部是原生JS实现，完全不需要引入jQuery和jQuery.noConflict相关处理，直接替换为以下代码即可：

// 等待DOM全部加载完成后再执行逻辑，避免获取元素为null
document.addEventListener('DOMContentLoaded', function() {
  // 视频悬停播放/暂停逻辑
  const videos = document.querySelectorAll(".polystar");
  for (const video of videos) {
    video.addEventListener('mouseover', function() {
      video.play()
    }, false);
    video.addEventListener('mouseout', function() {
      video.pause()
    }, false);
  }

  // 滚动按钮逻辑，改用addEventListener绑定避免事件被其他代码覆盖
  const nextBtn = document.getElementById("slide");
  const prevBtn = document.getElementById("slideBack");
  const galleryContainer = document.getElementById("container");

  // 先判断元素存在再绑定事件，避免控制台报错
  if (nextBtn && prevBtn && galleryContainer) {
    nextBtn.addEventListener('click', function() {
      galleryContainer.scrollLeft += 310;
    });
    prevBtn.addEventListener('click', function() {
      galleryContainer.scrollLeft -= 310;
    });
  }
})

3. 修正CSS冲突 #

你现有CSS第一行给所有div设置了固定样式，会污染WordPress主题内其他div的样式，做两处调整即可：

调整全局div样式为仅作用于画廊内的子div #

将原CSS代码中：

div {
  position: relative;
  width: 300px;
  display: inline-block;
  margin: 0px;
}

替换为：

#container > div {
  position: relative;
  width: 300px;
  display: inline-block;
  margin: 0px;
}

给画廊容器加相对定位 #

给#container的CSS规则新增position: relative，避免前后滚动按钮的定位偏移：

#container {
  display: flex;
  overflow-x: auto;
  width: 900px;
  height: 160px;
  background-color: black;
  position: relative; /* 新增这一行 */
}

4. 调整代码插入配置 #

在Header Footer Code Manager插件中，将上述JS代码设置为页脚（Footer） 位置加载，勾选「仅在前台加载」，避免后台加载报错。

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