将滚动条按钮移出轨道

Question

有人知道将滚动条按钮移出轨道的选项吗？我正在尝试 translate() 但它不起作用。我想将它们作为向下和向上箭头放在一组垂直缩略图的顶部和底部中心。

非常感谢，米格尔·吉斯伯特

ul.product-images{
    height: 100px;
    width: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.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:single-button{
    width: 100px;
    background-color: red;
    transform: translate(-50px, 50px);
}

<div class="col-md-1 js-qv-mask mask pr-0 scroll">
      <ul class="product-images js-qv-product-images">
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
                  <li class="thumb-container">
            img
          </li>
              </ul>
    </div>

Answer 1

我刚刚使用 jquery

创建了新的上下滚动按钮

// Scroll up & down for thumb product pictures
$('.scroll-up-button').on('click', function() {
    var y = $('.thumb-container-parent').scrollTop(); 
    $('.thumb-container-parent').scrollTop(y - 100); // up 100px
});
$('.scroll-down-button').on('click', function() {
    var y = $('.thumb-container-parent').scrollTop(); 
    $('.thumb-container-parent').scrollTop(y + 100); // down 100px
});

将滚动条按钮移出轨道

Move scrollbar button out of track

css

frontend

transform

scrollbar

translate