如何创建控制滚动条上下、左右移动的按钮？基于JavaScript/jQuery实现谷歌表格同款滚动控制功能

没问题，这两个需求都完全可以实现，我给你拆解一下具体的做法——不管是原生JavaScript还是jQuery都能搞定，逻辑和你提到的谷歌表格功能是一致的。

1. 先搞定按钮的结构和基础样式 #

首先我们需要创建控制滚动的按钮，并给它们设置合适的样式（比如固定在页面/容器的角落，和谷歌表格的布局类似）：

HTML结构 #

<!-- 如果是控制页面滚动，直接放在body里；如果是控制容器内滚动，就放在容器附近 -->
<div class="scroll-controls">
  <button class="scroll-btn scroll-up">↑</button>
  <button class="scroll-btn scroll-down">↓</button>
  <button class="scroll-btn scroll-left">←</button>
  <button class="scroll-btn scroll-right">→</button>
</div>

<!-- 示例：需要滚动的表格容器（模拟谷歌表格场景） -->
<div id="table-container">
  <table>
    <!-- 这里放大量表格内容，让容器出现滚动条 -->
  </table>
</div>

CSS样式 #

.scroll-controls {
  position: fixed; /* 如果是容器内滚动，改成absolute，同时给容器设置position: relative */
  bottom: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.scroll-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 18px;
}

.scroll-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 模拟表格容器的滚动样式 */
#table-container {
  width: 800px;
  height: 500px;
  overflow: auto;
  border: 1px solid #ddd;
}

#table-container table {
  width: 1500px; /* 让表格宽度超过容器，出现水平滚动条 */
  border-collapse: collapse;
}

#table-container td {
  padding: 8px;
  border: 1px solid #ddd;
}

2. 用JavaScript/jQuery实现点击控制滚动 #

方案一：原生JavaScript实现 #

情况1：控制整个页面的滚动

// 获取按钮元素
const scrollUpBtn = document.querySelector('.scroll-up');
const scrollDownBtn = document.querySelector('.scroll-down');
const scrollLeftBtn = document.querySelector('.scroll-left');
const scrollRightBtn = document.querySelector('.scroll-right');

// 垂直滚动控制
scrollUpBtn.addEventListener('click', () => {
  window.scrollBy({
    top: -50, // 每次点击滚动50px，可根据需求调整
    behavior: 'smooth' // 平滑滚动效果，去掉则是瞬间滚动
  });
});

scrollDownBtn.addEventListener('click', () => {
  window.scrollBy({
    top: 50,
    behavior: 'smooth'
  });
});

// 水平滚动控制
scrollLeftBtn.addEventListener('click', () => {
  window.scrollBy({
    left: -50,
    behavior: 'smooth'
  });
});

scrollRightBtn.addEventListener('click', () => {
  window.scrollBy({
    left: 50,
    behavior: 'smooth'
  });
});

情况2：控制指定容器（比如表格容器）的滚动

如果是像谷歌表格那样控制某个容器内的滚动，只需要把window换成对应的容器元素即可：

const container = document.getElementById('table-container');

// 垂直滚动
scrollUpBtn.addEventListener('click', () => {
  container.scrollBy({
    top: -50,
    behavior: 'smooth'
  });
});

scrollDownBtn.addEventListener('click', () => {
  container.scrollBy({
    top: 50,
    behavior: 'smooth'
  });
});

// 水平滚动
scrollLeftBtn.addEventListener('click', () => {
  container.scrollBy({
    left: -50,
    behavior: 'smooth'
  });
});

scrollRightBtn.addEventListener('click', () => {
  container.scrollBy({
    left: 50,
    behavior: 'smooth'
  });
});

方案二：jQuery实现（更简洁） #

控制页面滚动

// 垂直滚动
$('.scroll-up').click(() => {
  $('html, body').animate({ scrollTop: '-=50px' }, 100); // 100ms是滚动时长，可调整
});

$('.scroll-down').click(() => {
  $('html, body').animate({ scrollTop: '+=50px' }, 100);
});

// 水平滚动
$('.scroll-left').click(() => {
  $('html, body').animate({ scrollLeft: '-=50px' }, 100);
});

$('.scroll-right').click(() => {
  $('html, body').animate({ scrollLeft: '+=50px' }, 100);
});

控制容器内滚动

// 垂直滚动
$('.scroll-up').click(() => {
  $('#table-container').animate({ scrollTop: '-=50px' }, 100);
});

$('.scroll-down').click(() => {
  $('#table-container').animate({ scrollTop: '+=50px' }, 100);
});

// 水平滚动
$('.scroll-left').click(() => {
  $('#table-container').animate({ scrollLeft: '-=50px' }, 100);
});

$('.scroll-right').click(() => {
  $('#table-container').animate({ scrollLeft: '+=50px' }, 100);
});

额外优化：像谷歌表格一样禁用边界按钮 #

谷歌表格里当滚动到顶部时，向上按钮会变成不可点击状态，我们可以实现这个逻辑提升体验：

以原生JS控制容器为例：

// 监听容器的滚动事件
container.addEventListener('scroll', () => {
  // 顶部边界判断
  if (container.scrollTop === 0) {
    scrollUpBtn.disabled = true;
    scrollUpBtn.style.opacity = '0.5';
  } else {
    scrollUpBtn.disabled = false;
    scrollUpBtn.style.opacity = '1';
  }

  // 底部边界判断：scrollTop + 容器可视高度 >= 内容总高度
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    scrollDownBtn.disabled = true;
    scrollDownBtn.style.opacity = '0.5';
  } else {
    scrollDownBtn.disabled = false;
    scrollDownBtn.style.opacity = '1';
  }

  // 左侧边界判断
  if (container.scrollLeft === 0) {
    scrollLeftBtn.disabled = true;
    scrollLeftBtn.style.opacity = '0.5';
  } else {
    scrollLeftBtn.disabled = false;
    scrollLeftBtn.style.opacity = '1';
  }

  // 右侧边界判断：scrollLeft + 容器可视宽度 >= 内容总宽度
  if (container.scrollLeft + container.clientWidth >= container.scrollWidth) {
    scrollRightBtn.disabled = true;
    scrollRightBtn.style.opacity = '0.5';
  } else {
    scrollRightBtn.disabled = false;
    scrollRightBtn.style.opacity = '1';
  }
});

这样就能完全模拟谷歌表格的滚动控制按钮效果啦！

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