Замедлить горизонтальную прокрутку div

Question

У меня есть контейнер с 3 строками текста, каждая строка превышает ширину этого контейнера, поэтому есть горизонтальная полоса прокрутки, но я скрываю это, я хочу сделать прокрутку медленнее только для этого элемента.

Вот скрипка: https://jsfiddle.net/ehp3qnty/576/

Вот код:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-bottom: -50px;
  /* maximum width of scrollbar */
  padding-bottom: 50px;
  /* maximum width of scrollbar */
  overflow-y: hidden;
  overflow-x: scroll;
}

p {
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
  <!-- .child -->
</div>
<!-- .parent -->

Как сделать медленнее?

Мне нужно чистое решение CSS / JS без какого-либо плагина / библиотеки.

Answer 1

Я верю, что есть много способов достичь этого. Один простой способ - сделать прокрутку длиннее и установить позицию содержимого относительно новой прокрутки.

HTML:

<div class='container'>
  <div class='content'>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

Пусть w - ширина контейнера, а s - ширина содержимого (или начальная ширина прокрутки).

Если я хочу сделать прокрутку в f раз медленнее, мне нужно сделать прокрутку f раз дольше. Ширина прокрутки будет s * f.

В конце прокрутки scrollLeft будет s * f - w. И слева от контента должно быть s * f - s.

Таким образом, соотношение будет (s * f - s) / (s * f - w).

JavaScript:

let f = 5
let s = container.scrollWidth

container.addEventListener('scroll', () => {
  let w = container.offsetWidth
  let r = (s * f - s) / (s * f - w)
  let x = container.scrollLeft
  content.style.transform = `translateX(${x * r}px)`
})

Возможно, это не идеальное решение, но я надеюсь, что это поможет.

Смотрите живой пример здесь .

Answer 2

$(document).ready(function(){
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});
Here goes the upgraded plugin jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});