如何实现仅通过左右两个按钮控制overflow-x横向滚动？

没问题，我结合你给出的现有CSS代码，给你一套完整的解决方案，实现点击左右按钮横向滚动图片的效果。咱们分三步来做：

1. 调整HTML结构 #

首先需要把你的图片容器.nf放在一个相对定位的父容器里，这样左右按钮可以定位在容器的两侧：

<div class="scroll-wrapper">
  <button class="scroll-btn scroll-left">←</button>
  <div class="nf">
    <!-- 这里放你现有的图片链接和标题 -->
    <a href="#">
      <img src="你的图片地址.jpg" alt="图片描述">
      <p>图片标题</p>
    </a>
    <!-- 更多图片项... -->
  </div>
  <button class="scroll-btn scroll-right">→</button>
</div>

2. 补充和调整CSS样式 #

我保留了你原有的样式，新增了父容器和按钮的样式，同时优化了滚动的体验：

/* 父容器：提供相对定位的上下文，限制按钮范围 */
.scroll-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 你的原有样式，调整overflow-x为hidden（用JS控制滚动，隐藏原生滚动条），添加平滑滚动 */
.nf {
  margin-left: -13px;
  width: 97.9%;
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth; /* 让滚动有平滑过渡效果 */
}

.nf>a>img {
  border-radius: 18px;
  width: 350px;
  height: 242px;
  margin: 5px;
  border: 5px solid white;
}

.nf>a>p {
  text-align: center;
  color: white;
  margin-left: 10px;
  width: 350px; /* 和图片宽度保持一致 */
}

/* 滚动按钮样式：居中定位，半透明背景提升视觉效果 */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.7);
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
}

.scroll-btn:hover {
  background-color: rgba(0,0,0,0.9);
}

.scroll-left {
  left: 10px;
}

.scroll-right {
  right: 10px;
}

/* 可选：如果想保留原生滚动条但隐藏它，添加这段代码 */
.nf::-webkit-scrollbar {
  display: none;
}
.nf {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

3. 添加JavaScript逻辑 #

这部分实现按钮点击滚动，以及滚动到边界时禁用对应按钮的功能，提升用户体验：

// 获取页面元素
const scrollContainer = document.querySelector('.nf');
const leftBtn = document.querySelector('.scroll-left');
const rightBtn = document.querySelector('.scroll-right');

// 每次滚动的距离：根据你的图片尺寸计算（350px宽度 + 左右margin各5px + 左右border各5px = 370px）
const scrollStep = 370;

// 右按钮点击事件：向右滚动一个图片的宽度
rightBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: scrollStep,
    behavior: 'smooth'
  });
  checkScrollBounds(); // 滚动后检查边界状态
});

// 左按钮点击事件：向左滚动一个图片的宽度
leftBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: -scrollStep,
    behavior: 'smooth'
  });
  checkScrollBounds(); // 滚动后检查边界状态
});

// 监听滚动事件，实时更新按钮禁用状态
scrollContainer.addEventListener('scroll', checkScrollBounds);

// 检查滚动边界的函数：判断是否到最左/最右，禁用对应按钮
function checkScrollBounds() {
  const totalWidth = scrollContainer.scrollWidth; // 容器总宽度（包括不可见部分）
  const currentScroll = scrollContainer.scrollLeft; // 当前滚动位置
  const visibleWidth = scrollContainer.clientWidth; // 容器可视宽度

  // 滚动到最左边时禁用左按钮
  leftBtn.disabled = currentScroll <= 0;
  // 滚动到最右边时禁用右按钮（减10是为了避免精度误差）
  rightBtn.disabled = currentScroll + visibleWidth >= totalWidth - 10;
}

// 页面加载时初始化按钮状态
checkScrollBounds();

关键点说明： #

• scrollStep的数值是根据你图片的尺寸计算的，确保每次滚动刚好显示一张完整的图片；
• scroll-behavior: smooth让滚动过程更流畅；
• 边界检测功能可以防止用户重复点击无效按钮，提升交互体验；
• 如果想保留原生的鼠标滚轮滚动功能，只需要把.nf的overflow-x改回auto即可，同时保留隐藏滚动条的CSS（可选）。

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