如何将scrollbar button移出scrollbar track？

嗨Miguel，

你遇到的问题是因为::-webkit-scrollbar-button的布局和滚动条轨道（track）是紧密绑定的，默认的盒模型与定位规则会限制transform: translate()的效果，再加上你设置的width:100px和滚动条本身的width:4px冲突，最终导致样式无法按预期生效。

要实现把上下箭头放在垂直缩略图组的顶部和底部中心，更可靠的方式是自定义滚动控制按钮，而非强行修改原生滚动条按钮的位置，具体方案如下：

步骤1：调整HTML结构 #

在容器内添加两个独立的自定义滚动按钮，放在ul.product-images外侧：

<div class="col-md-1 js-qv-mask mask pr-0 scroll">
  <!-- 自定义滚动控制按钮 -->
  <button class="scroll-btn scroll-top-btn">↑</button>
  <button class="scroll-btn scroll-bottom-btn">↓</button>
  
  <ul class="product-images js-qv-product-images">
    <li class="thumb-container"> <img src="your-image-url" alt="缩略图"> </li>
    <li class="thumb-container"> <img src="your-image-url" alt="缩略图"> </li>
    <!-- 其余缩略图列表项 -->
  </ul>
</div>

步骤2：修改CSS样式 #

隐藏原生滚动条按钮，调整容器与自定义按钮的定位样式：

/* 容器设置相对定位，作为按钮的定位参考 */
.col-md-1.scroll {
  position: relative;
  width: 100px;
}

ul.product-images{ 
  height: 100px; 
  width: 100px; 
  overflow-y: scroll; 
  overflow-x: hidden; 
}

/* WebKit滚动条样式：保留轨道和滑块，隐藏原生按钮 */
.product-images::-webkit-scrollbar { width: 4px; }
.product-images::-webkit-scrollbar-track { background: #f1f1f1; }
.product-images::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.product-images::-webkit-scrollbar-thumb:hover { background: #555; }
.product-images::-webkit-scrollbar-button { display: none; }

/* 火狐浏览器适配：隐藏原生滚动条按钮 */
.product-images {
  scrollbar-width: thin;
}

/* 自定义滚动按钮样式 */
.scroll-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background-color: #888;
  color: white;
  cursor: pointer;
  z-index: 10;
}
.scroll-top-btn {
  top: 0;
}
.scroll-bottom-btn {
  bottom: 0;
}
.scroll-btn:hover {
  background-color: #555;
}

步骤3：添加JavaScript控制滚动 #

给自定义按钮绑定点击事件，实现滚动逻辑：

const productImages = document.querySelector('.product-images');
const scrollTopBtn = document.querySelector('.scroll-top-btn');
const scrollBottomBtn = document.querySelector('.scroll-bottom-btn');
// 每次滚动的高度（可根据你的缩略图实际高度调整）
const scrollStep = 20;

scrollTopBtn.addEventListener('click', () => {
  productImages.scrollTop -= scrollStep;
});

scrollBottomBtn.addEventListener('click', () => {
  productImages.scrollTop += scrollStep;
});

方案优势 #

• 原生滚动条伪元素的布局受浏览器内核限制，很难完全脱离轨道自由定位，自定义按钮的灵活性更高；
• 可以轻松实现居中、hover效果等自定义样式，完全匹配你的需求；
• 兼容性更好，非WebKit内核的浏览器（比如火狐）也能正常工作。

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