Reduce the speed of horizontal scrolling in a div element

Question

Reduce the speed of horizontal scrolling in a div element

I have a container with 3 lines of text, and each line is wider than the container itself. This causes a horizontal scrollbar to appear, but I've hidden it. My goal is to slow down the scrolling speed for this particular element.

Here is a fiddle: https://jsfiddle.net/ehp3qnty/576/

Here is the code:

.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 -->

How can I achieve slower scrolling?

I'm looking for a solution using pure CSS or JavaScript without any external plugins or libraries.

javascript html css

Answer 1

Answer №1

$(document).ready(function(){
    $('#your_div').hScroll(150); // Adjusted scrolling amount
});
Behold the newly improved version of jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 150;
        $(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();
        })
    };
});

Answer 2

$(document).ready(function(){
    $('#your_div').hScroll(150); // Adjusted scrolling amount
});
Behold the newly improved version of jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 150;
        $(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();
        })
    };
});

Answer 3

Answer №2

There are numerous methods to accomplish this task. One straightforward approach is to elongate the scroll length and adjust the content position relative to the new scroll.

HTML:

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

If w represents the container width and s is the content width (or original scroll width).

To slow down the scroll by a factor of f, the scroll must be made f times longer. The new scroll width will be s * f.

When reaching the end of the scroll, the scrollLeft will be s * f - w. And the left position of the content should be s * f - s.

Therefore, the ratio will be calculated as (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)`
})

This solution may not be perfect but hopefully, it provides some assistance.

View a live example here.

Answer 4

There are numerous methods to accomplish this task. One straightforward approach is to elongate the scroll length and adjust the content position relative to the new scroll.

HTML:

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

If w represents the container width and s is the content width (or original scroll width).

To slow down the scroll by a factor of f, the scroll must be made f times longer. The new scroll width will be s * f.

When reaching the end of the scroll, the scrollLeft will be s * f - w. And the left position of the content should be s * f - s.

Therefore, the ratio will be calculated as (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)`
})

This solution may not be perfect but hopefully, it provides some assistance.

View a live example here.

Reduce the speed of horizontal scrolling in a div element

Answer №1

Answer №2

Similar questions

Achieve a disabled scroll bar feature on Firefox

Utilize Pseudo Elements for Designing a Unique Background Overlay

Converting a JavaScript function to asynchronous with callback functionality

Tips on deleting a section of text inside a div

What is the best way to align a center column of a precise width that is responsive to different screen

Retrieve all default and user-defined fields associated with contacts in the CRM 2011 system

Is there a way to animate a div using toggle?

session failed to register the third variable

transmitting comfort through events

Modifying the cursor appearance during object dragging is a simple task that can enhance

Steps for executing a function within a fs.stat callback

Using PHP and jQuery to add a class to an array

"Enhance your browsing experience with Chrome by automatically changing the background when

Tips for using AngularJS to upload files to Cloudinary

Header alignment issue in JQGrid

Step-by-step guide for implementing tooltips using jQuery

JQuery Keyup event is not functioning as expected

What could be causing the script to display the object's content inaccurately?

Issue with implementing setCallBack for updating variant prices in Shopify

Executing a JavaScript function without passing arguments does not yield the desired result