javascript - 隐藏滚动条并改为添加箭头

Question

我有一个带有一些图像的“div”，底部有一个滚动条。我想做的是添加箭头滚动并使滚动条不可见

到目前为止，我已经尝试了一些方法，但没有奏效。

.scoll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
}

ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    width: 300px;
    height: 180px;
}

<div class="container">
  <div class="row">
      <div class="col-12">
          <div class="scoll-pane mt-4">
              <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>
              </ul>
          </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">

Answer 1

您可以使用 webkit-scrollbar 和 scrollbar-width CSS 隐藏滚动条。此外，您可以使用一些简单的 javascript 选择器在按下按钮时“滑动”div，如下例所示:

var button = document.getElementById('slide');
button.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'right',25,100,10);
};

var back = document.getElementById('slideBack');
back.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'left',25,100,10);
};

function sideScroll(element,direction,speed,distance,step){
    scrollAmount = 0;
    var slideTimer = setInterval(function(){
        if(direction == 'left'){
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if(scrollAmount >= distance){
            window.clearInterval(slideTimer);
        }
    }, speed);
}

.scoll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
    -ms-overflow-style: scroll;  // IE 10+
    scrollbar-width: none;  // Firefox
}

ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    width: 300px;
    height: 180px;
}

  .scoll-pane::-webkit-scrollbar { 
  display: none;  // Safari and Chrome
  }

<div class="container">
  <div class="row">
      <div class="col-12">
          <div class="scoll-pane mt-4" id="container">
              <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>
              </ul>
          </div>
      </div>
  </div>
 </div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
 
 
 <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">