Slow down horizontal scrolling of a div

I have a container with 3 lines of text, Each line exceeds the width of that container, So there is a horizontal scroll bar, But I hide it, I want to make the scrolling slower for this element only.

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 to make is slower?

I need a pure CSS/JS solution without any plugin/library.

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

This is not possible without any plugin. Check this
– Towkir Ahmed
Nov 12 at 18:51

How is the user scrolling it? Using shift+scroll?
– vrugtehagel
Nov 12 at 18:55

@vrugtehagel, It's for small devices(mobiles), Try to press keyboard arrows or use responsiveness mode and swipe the element
– maxwell
Nov 12 at 18:57

In that case I think it's browser dependent. You'd have to manually do the cases you want to support (like mimicking swiping by manually setting it's position based on the touchmove data, or manually setting the margin-left or left property when pressing the arrow keys).
– vrugtehagel
Nov 12 at 19:15

add a comment |

I have a container with 3 lines of text, Each line exceeds the width of that container, So there is a horizontal scroll bar, But I hide it, I want to make the scrolling slower for this element only.

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 to make is slower?

I need a pure CSS/JS solution without any plugin/library.

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

This is not possible without any plugin. Check this
– Towkir Ahmed
Nov 12 at 18:51

How is the user scrolling it? Using shift+scroll?
– vrugtehagel
Nov 12 at 18:55

@vrugtehagel, It's for small devices(mobiles), Try to press keyboard arrows or use responsiveness mode and swipe the element
– maxwell
Nov 12 at 18:57

In that case I think it's browser dependent. You'd have to manually do the cases you want to support (like mimicking swiping by manually setting it's position based on the touchmove data, or manually setting the margin-left or left property when pressing the arrow keys).
– vrugtehagel
Nov 12 at 19:15

add a comment |

I have a container with 3 lines of text, Each line exceeds the width of that container, So there is a horizontal scroll bar, But I hide it, I want to make the scrolling slower for this element only.

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 to make is slower?

I need a pure CSS/JS solution without any plugin/library.

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

I have a container with 3 lines of text, Each line exceeds the width of that container, So there is a horizontal scroll bar, But I hide it, I want to make the scrolling slower for this element only.

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 to make is slower?

I need a pure CSS/JS solution without any plugin/library.

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

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

javascript html css html5 css3

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

edited Nov 12 at 19:07

asked Nov 12 at 18:43

maxwell

314

asked Nov 12 at 18:43

maxwell

314

asked Nov 12 at 18:43

maxwell

314

This is not possible without any plugin. Check this
– Towkir Ahmed
Nov 12 at 18:51

How is the user scrolling it? Using shift+scroll?
– vrugtehagel
Nov 12 at 18:55

@vrugtehagel, It's for small devices(mobiles), Try to press keyboard arrows or use responsiveness mode and swipe the element
– maxwell
Nov 12 at 18:57

In that case I think it's browser dependent. You'd have to manually do the cases you want to support (like mimicking swiping by manually setting it's position based on the touchmove data, or manually setting the margin-left or left property when pressing the arrow keys).
– vrugtehagel
Nov 12 at 19:15

add a comment |

This is not possible without any plugin. Check this
– Towkir Ahmed
Nov 12 at 18:51

How is the user scrolling it? Using shift+scroll?
– vrugtehagel
Nov 12 at 18:55

@vrugtehagel, It's for small devices(mobiles), Try to press keyboard arrows or use responsiveness mode and swipe the element
– maxwell
Nov 12 at 18:57

In that case I think it's browser dependent. You'd have to manually do the cases you want to support (like mimicking swiping by manually setting it's position based on the touchmove data, or manually setting the margin-left or left property when pressing the arrow keys).
– vrugtehagel
Nov 12 at 19:15

This is not possible without any plugin. Check this
– Towkir Ahmed
Nov 12 at 18:51

How is the user scrolling it? Using shift+scroll?
– vrugtehagel
Nov 12 at 18:55

@vrugtehagel, It's for small devices(mobiles), Try to press keyboard arrows or use responsiveness mode and swipe the element
– maxwell
Nov 12 at 18:57

In that case I think it's browser dependent. You'd have to manually do the cases you want to support (like mimicking swiping by manually setting it's position based on the touchmove data, or manually setting the margin-left or left property when pressing the arrow keys).
– vrugtehagel
Nov 12 at 19:15

add a comment |

2 Answers
2

active

oldest

votes

I believe there are a lot of ways to achieve this. One simple way is make a scroll longer, and set the position of content relative to the new scroll.

HTML:

<div class='container'>

  <div class='content'>

    <p>...</p>

    <p>...</p>

    <p>...</p>

  </div>

</div>

Let w is a container width and s is a content width (or initial scroll width).

If I want to make a scroll f times slower, I have to make a scroll f times longer. The scroll width will be s * f.

At the end of scroll, the scrollLeft will be s * f - w. And the left of content must be s * f - s.

So the ratio will be (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 may not be a perfect solution but I hope this help.

See live example here.

answered Nov 13 at 10:01

User 28

669513

add a comment |

$(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();

        })

    };

});

answered Nov 12 at 18:55

Ammar Iqbal

213

2

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268260%2fslow-down-horizontal-scrolling-of-a-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I believe there are a lot of ways to achieve this. One simple way is make a scroll longer, and set the position of content relative to the new scroll.

HTML:

<div class='container'>

  <div class='content'>

    <p>...</p>

    <p>...</p>

    <p>...</p>

  </div>

</div>

Let w is a container width and s is a content width (or initial scroll width).

If I want to make a scroll f times slower, I have to make a scroll f times longer. The scroll width will be s * f.

At the end of scroll, the scrollLeft will be s * f - w. And the left of content must be s * f - s.

So the ratio will be (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 may not be a perfect solution but I hope this help.

See live example here.

answered Nov 13 at 10:01

User 28

669513

add a comment |

I believe there are a lot of ways to achieve this. One simple way is make a scroll longer, and set the position of content relative to the new scroll.

HTML:

<div class='container'>

  <div class='content'>

    <p>...</p>

    <p>...</p>

    <p>...</p>

  </div>

</div>

Let w is a container width and s is a content width (or initial scroll width).

If I want to make a scroll f times slower, I have to make a scroll f times longer. The scroll width will be s * f.

At the end of scroll, the scrollLeft will be s * f - w. And the left of content must be s * f - s.

So the ratio will be (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 may not be a perfect solution but I hope this help.

See live example here.

answered Nov 13 at 10:01

User 28

669513

add a comment |

I believe there are a lot of ways to achieve this. One simple way is make a scroll longer, and set the position of content relative to the new scroll.

HTML:

<div class='container'>

  <div class='content'>

    <p>...</p>

    <p>...</p>

    <p>...</p>

  </div>

</div>

Let w is a container width and s is a content width (or initial scroll width).

If I want to make a scroll f times slower, I have to make a scroll f times longer. The scroll width will be s * f.

At the end of scroll, the scrollLeft will be s * f - w. And the left of content must be s * f - s.

So the ratio will be (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 may not be a perfect solution but I hope this help.

See live example here.

answered Nov 13 at 10:01

User 28

669513

I believe there are a lot of ways to achieve this. One simple way is make a scroll longer, and set the position of content relative to the new scroll.

HTML:

<div class='container'>

  <div class='content'>

    <p>...</p>

    <p>...</p>

    <p>...</p>

  </div>

</div>

Let w is a container width and s is a content width (or initial scroll width).

If I want to make a scroll f times slower, I have to make a scroll f times longer. The scroll width will be s * f.

At the end of scroll, the scrollLeft will be s * f - w. And the left of content must be s * f - s.

So the ratio will be (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 may not be a perfect solution but I hope this help.

See live example here.

answered Nov 13 at 10:01

User 28

669513

answered Nov 13 at 10:01

User 28

669513

answered Nov 13 at 10:01

User 28

669513

answered Nov 13 at 10:01

User 28

669513

add a comment |

$(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();

        })

    };

});

answered Nov 12 at 18:55

Ammar Iqbal

213

2

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

add a comment |

$(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();

        })

    };

});

answered Nov 12 at 18:55

Ammar Iqbal

213

2

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

add a comment |

$(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();

        })

    };

});

answered Nov 12 at 18:55

Ammar Iqbal

213

$(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();

        })

    };

});

answered Nov 12 at 18:55

Ammar Iqbal

213

answered Nov 12 at 18:55

Ammar Iqbal

213

answered Nov 12 at 18:55

Ammar Iqbal

213

answered Nov 12 at 18:55

Ammar Iqbal

213

2

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

add a comment |

2

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

Um, jQuery is a plugin, and he asked specifically for an answer in pure JS (or CSS)
– vrugtehagel
Nov 12 at 18:56

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky