Question

我需要在JavaScript中使用带有滚动条的滑块，如下图所示：
我有块（div），其中有内容（在未来的价格）。这个区块应该有一定的高度。其他行被隐藏。当我使用滑块时，内容需要相应更改。

代码：

＆＃13;

.slider {
  border-radius: 5px;
  background: #E0E0E0;
  background: -moz-linear-gradient(left top, #f8b317, #f8b317) repeat scroll 0 0 transparent;
  background: -webkit-gradient(linear, left top, right bottom, from(#f3e1c5), to(#f3e1c5));
  background: linear-gradient(left top, #f3e1c5, #f3e1c5);
  width: 310px;
  height: 15px;
  margin: 5px;
   margin-top: -220px; 
  transform: rotate(90deg);
}

.thumb {
  width: 10px;
  height: 25px;
  border-radius: 3px;
  position: relative;
  left: 2px;
  top: -5px;
  background: #f8b317;
  cursor: pointer;
}
.our_prices{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 40px;
    background: url(img/price.jpg)100% 100% no-repeat;
    background-size: cover;
}
.prices_scroll{
/*     border: 2px solid #331f1f ; */
    color: #331f1f;
    display: flex;
    flex-direction: column;
    height: 600px;
    overflow-y: scroll;

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
      <div class="prices">
        <div class="prices_scroll">
          <span>................................</span>
          ............................................
          <span>................................</span>
          
  <div id="slider" class="slider">
    <div class="thumb"></div>
  </div>
        </div>

      </div>




  <script>
    var sliderElem = document.getElementById('slider');
    var thumbElem = sliderElem.children[0];

    thumbElem.onmousedown = function(e) {
      var thumbCoords = getCoords(thumbElem);
      var shiftY = e.pageY - thumbCoords.top;
      // shiftY здесь не нужен, слайдер двигается только по горизонтали
      console.log("shiftY" + shiftY);

      var sliderCoords = getCoords(sliderElem);

      document.onmousemove = function(e) {
        //  вычесть координату родителя, т.к. position: relative
        var newTop = e.pageY - shiftY - sliderCoords.top;
        console.log("newTop" + newTop);
        // курсор ушёл вне слайдера
        if (newTop < 0) {
          newTop = 0;
        }
        var botEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
        console.log("botEdge" + botEdge);
        if (newTop > botEdge) {
          newTop = botEdge;
        }

        thumbElem.style.left = newTop + 'px';
      }

      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
      };

      return false; // disable selection start (cursor change)
    };

    thumbElem.ondragstart = function() {
      return false;
    };

    function getCoords(elem) { // кроме IE8-
      var box = elem.getBoundingClientRect();

      return {
        top: box.top + pageXOffset,
        left: box.bottom + pageYOffset
      };

    }
  </script>

</body>

</html>

＆＃13;

我需要如下图所示的结果

在JavaScript中使用滚动条

0 个答案: