Как связать javascript и scrollbar?

357
14 августа 2017, 11:56

Добрый день. У меня возникла проблема с тем, как мне связать ползунок, написанный на javascript и при его перемещении смещать контент в блоке. 

.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; 
 
}
<!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> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <span>................................</span> 
          <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>

Естественно у блока .price_scroll будет фиксированная высота, элементов 10, остальные должны быть не видны, и при передвижении ползунка, 1 элемент должен скрываться, а 11 появляться, грубо говоря происходит ивент скролла.

READ ALSO
Обработка событий клавиатуры jsp servlet
javascript

Обработка событий клавиатуры jsp servlet

Суть проблемы: Когда-то писал десктопное приложение на java, где считывались события клавиатуры (когда, какая клавиша была нажата, сколько удерживалась...

 297
Замена своего BB-тега на HTML-ссылку
PHP

Замена своего BB-тега на HTML-ссылку

Помогите составить регулярное выражения для замены тега на ссылку с сохранением информации в теле тегаЕсть строчка

 265
Как убрать ключи массива у которых только все значения пустые
PHP

Как убрать ключи массива у которых только все значения пустые

Получаю на выходе такой массив:

 344
OpenCart | Ошибка 500 в категориях и товарах
PHP

OpenCart | Ошибка 500 в категориях и товарах

Здравствуйте, столкнулся с такой проблемой, ошибка 500 на страницах категорий и товаров, на остальных страницах проблема не наблюдается, как...

 269