咱们一步步来搞定你的需求：先把原生横向滚动条藏起来，再添加自定义箭头实现滚动控制，确保在不同浏览器都能正常生效。

第一步：隐藏原生横向滚动条 #

首先修正你的容器样式，针对不同浏览器添加滚动条隐藏规则（注意你的类名scoll-pane拼写少了个r，建议改成scroll-pane避免后续问题，这里先按你原类名处理）：

.scoll-pane {
  width: 100%;
  height: auto;
  overflow-x: auto; /* 明确开启横向滚动 */
  overflow-y: hidden;
  outline: none;
  padding-bottom: 15px;
  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge 隐藏滚动条 */
  -ms-overflow-style: none;
}

/* Chrome/Safari/Opera 隐藏滚动条 */
.scoll-pane::-webkit-scrollbar {
  display: none;
}

第二步：添加自定义滚动箭头与布局调整 #

修改HTML，给滚动容器添加左右箭头按钮，用Bootstrap的弹性布局把它们和容器对齐：

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between mt-4">
        <!-- 左滚动箭头 -->
        <button class="scroll-btn scroll-left" aria-label="向左滚动">&larr;</button>
        <!-- 滚动容器 -->
        <div class="scoll-pane flex-grow-1 mx-2">
          <ul class="photos">
            <li><img src="https://robohash.org/test"></li>
            <li><img src="https://robohash.org/test"></li>
            <li><img src="https://robohash.org/test"></li>
            <li><img src="https://robohash.org/test"></li>
            <li><img src="https://robohash.org/test"></li>
            <li><img src="https://robohash.org/test"></li>
          </ul>
        </div>
        <!-- 右滚动箭头 -->
        <button class="scroll-btn scroll-right" aria-label="向右滚动">&rarr;</button>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

给按钮加基础样式，让它更易用：

.scroll-btn {
  border: none;
  background: #f0f0f0;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s;
}

.scroll-btn:hover {
  background: #e0e0e0;
}

/* 滚动到边缘时禁用按钮，提升交互体验 */
.scroll-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

第三步：用JavaScript实现滚动控制 #

添加JS代码，实现点击箭头的平滑滚动，同时根据滚动位置自动启用/禁用边缘按钮：

const scrollPane = document.querySelector('.scoll-pane');
const scrollLeftBtn = document.querySelector('.scroll-left');
const scrollRightBtn = document.querySelector('.scroll-right');

// 每次滚动的距离（按图片宽度+间隙调整，这里设为320px）
const scrollStep = 320;

// 横向滚动函数
function scrollHorizontally(direction) {
  scrollPane.scrollBy({
    left: direction * scrollStep,
    behavior: 'smooth' // 平滑滚动效果，可去掉改为瞬间滚动
  });
}

// 绑定按钮点击事件
scrollLeftBtn.addEventListener('click', () => scrollHorizontally(-1));
scrollRightBtn.addEventListener('click', () => scrollHorizontally(1));

// 更新按钮状态函数：滚动到边缘时禁用对应按钮
function updateButtonStates() {
  scrollLeftBtn.disabled = scrollPane.scrollLeft <= 0;
  scrollRightBtn.disabled = scrollPane.scrollLeft >= scrollPane.scrollWidth - scrollPane.clientWidth;
}

// 初始化时检查一次按钮状态
updateButtonStates();
// 滚动过程中实时更新按钮状态
scrollPane.addEventListener('scroll', updateButtonStates);

这样整套方案就能实现你要的效果：原生滚动条被隐藏，点击左右箭头可以平滑控制横向滚动，还能在滚动到边缘时自动禁用按钮，提升交互体验。

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