How to scroll horizontal in na div with mouse wheel, or drag with jquery?
I've tried draggable, but in my code it isn't useful.
Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div using the mouse wheel?
How to scroll horizontal in na div with mouse wheel, or drag with jquery?
I've tried draggable, but in my code it isn't useful.
Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div using the mouse wheel?
Try this for horizontal scrolling with mouse wheel. This is pure JavaScript:
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
this.scrollLeft -= (delta * 40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('yourDiv').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('yourDiv').addEventListener('mousewheel', scrollHorizontally, false);
// Firefox
document.getElementById('yourDiv').addEventListener('DOMMouseScroll', scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('yourDiv').attachEvent('onmousewheel', scrollHorizontally);
}
})();
Here’s a demo, but with document.body
and window
as a targetted element: https://taufik-nurrohman.github.io/dte-project/full-page-horizontal-scrolling.html
e.preventDefault();
with this if statement: if((delta > 0 && document.getElementById('yourDiv').scrollLeft > 0) || (delta < 0 && document.getElementById('yourDiv').offsetWidth+document.getElementById('yourDiv').scrollLeft < el.scrollWidth))
(tested on Chrome and Firefox) –
Quantity <div id="yourDiv"></div>
–
Blur writing-mode: vertical-rl
websites for instance. –
Acclamation <div id="yourDiv"></div>
somewhere in your scrolling-vertically section. –
Blur if((delta > 0 && document.getElementById('yourDiv').scrollLeft > 0) || (delta < 0 && document.getElementById('yourDiv').offsetWidth+document.getElementById('yourDiv').scrollLeft < document.getElementById('yourDiv').scrollWidth))
–
Teston whell
event today! –
Blur I have rewritten the code from the answer by @Anonymous-Lettuce. The width recalculation of the element is skipped as it was unnecessary and sometimes undesirable.
This also provides additional feature to pass scroll-amount
in px
to the plugin.
Use it like this:
$(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();
})
};
});
Here is the minified version of the same jquery.hscroll.min.js
:
jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}});
Here is the JSFiddle
Wrote this plugin days ago.
$.fn.hScroll = function( options )
{
function scroll( obj, e )
{
var evt = e.originalEvent;
var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;
if( direction > 0)
{
direction = $(obj).scrollLeft() - 120;
}
else
{
direction = $(obj).scrollLeft() + 120;
}
$(obj).scrollLeft( direction );
e.preventDefault();
}
$(this).width( $(this).find('div').width() );
$(this).bind('DOMMouseScroll mousewheel', function( e )
{
scroll( this, e );
});
}
Try it out with
$(document).ready(function(){
$('#yourDiv').hScroll();
});
The width of the child element of the div should be wider than the parent.
Like 4000 px or something.
<div id="yourDiv">
<div style="width: 4000px;"></div>
</div>
I'd like to add a slight improvement to the answer given by @Taufik.
In the context of an es2015
module:
const el = document.querySelector('#scroller');
function scrollHorizontally(e) {
e = window.event || e;
e.preventDefault();
el.scrollLeft -= (e.wheelDelta || -e.detail);
}
function init() {
if (!el) {
return;
}
if (el.addEventListener) {
el.addEventListener('mousewheel', scrollHorizontally, false);
el.addEventListener('DOMMouseScroll', scrollHorizontally, false);
} else {
el.attachEvent('onmousewheel', scrollHorizontally);
}
}
export default init;
The main difference being: el.scrollLeft -= (e.wheelDelta || -e.detail);
Using the e.wheelData
directly in the scroll offset means we can have the inertia, so that the scrolling can slow down gradually. I found this worked well for me.
Just use in your code like so (assuming the above code is in a file called scroller.js):
import scroller from './scroller.js';
scroller();
You can do that with just javascrpt (no Jquery) in a clear way and also allow vertical scrolling:
const target = document.querySelector('div')
target.addEventListener('wheel', event => {
const toLeft = event.deltaY < 0 && target.scrollLeft > 0
const toRight = event.deltaY > 0 && target.scrollLeft < target.scrollWidth - target.clientWidth
if (toLeft || toRight) {
event.preventDefault()
target.scrollLeft += event.deltaY
}
})
-=
. –
Cardholder CSS
solutionYou dont need Javascript
or JQuery
for this
For more information: https://css-tricks.com/pure-css-horizontal-scrolling/
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
body {
background: #111;
}
div {
box-sizing: border-box;
}
.horizontal-scroll-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: calc(250px + 1px);
max-height: 750px;
margin: 0;
padding-top: 1px;
background: #abc;
overflow-y: auto;
overflow-x: hidden;
-webkit-transform: rotate(-90deg) translateY(-250px);
transform: rotate(-90deg) translateY(-250px);
-webkit-transform-origin: right top;
transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
display: block;
padding: 5px;
background: #cab;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: right top;
transform-origin: right top;
}
.squares {
padding: 250px 0 0 0;
}
.squares > div {
width: 250px;
height: 250px;
margin: 10px 0;
}
<div class="horizontal-scroll-wrapper squares">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
</div>
In my case I needed to reset the scroll back to normal when the browser was resized, so I modified Izhar's code a bit to make it work for my application:
Initiate hScroll on browser resize:
$(function () {
$(window).resize($('.horizontal-scroll').hScroll(60));
});
Check if container has white-space property set to 'nowrap' and return if not:
$.fn.hScroll = function (amount) {
var $this = $(this);
amount = amount || 120;
$this.bind('DOMMouseScroll mousewheel', function (event) {
var isHorizontal = $('.horizontal-scroll').css('white-space') == 'nowrap';
if (!isHorizontal) return;
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();
});
};
I use this media query to update the white-space property:
@media (min-width: 768px) {
.horizontal-scroll { white-space: nowrap !important; }
}
Hope this helps anyone wanting to do the same.
This code allows you to start scrolling the page when the horizontal scrolling of the block is over.
function addHorizontalScroll(blockId) {
let block = document.getElementById(blockId);
block.addEventListener("wheel", function (evt) {
let maxScroll = block.scrollWidth - block.offsetWidth;
let currentScroll = block.scrollLeft + evt.deltaY;
if (currentScroll > 0 && currentScroll < maxScroll) {
evt.preventDefault();
block.scrollLeft = currentScroll;
}
else if (currentScroll <= 0) {
block.scrollLeft = 0;
}
else {
block.scrollLeft = maxScroll;
}
});
}
addHorizontalScroll('widebla');
function addHorizontalScroll(blockId) {
let block = document.getElementById(blockId);
block.addEventListener("wheel", function (evt) {
let maxScroll = block.scrollWidth - block.offsetWidth;
let currentScroll = block.scrollLeft + evt.deltaY;
if (currentScroll > 0 && currentScroll < maxScroll) {
evt.preventDefault();
block.scrollLeft = currentScroll;
}
else if (currentScroll <= 0) {
block.scrollLeft = 0;
}
else {
block.scrollLeft = maxScroll;
}
});
}
#widebla {
height: 100px;
overflow-y: auto;
}
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div id='widebla'> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla </div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
why is mine failing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#page-wrap {
width:500%; /* 100% x length of panel */
height:100%;
overflow:hidden;
}
.panel {
width:20%; /* 100% / length of panel */
float:left;
height:100%;
}
.panel .inner {padding:2em}
/* Details (Ignore this!) */
body {
font:italic normal 13px/1.4 Georgia,Serif;
color:#666;
}
h2 {
font-weight:bold;
font-size:200%;
margin:0 0 1em;
}
p {margin:1.5em 0}
#panel-1 {
background-color:black;
color:white;
}
#panel-2 {
background-color:magenta;
color:yellow;
}
#panel-3 {
background-color:darkblue;
color:lightgreen;
}
#panel-4 {
background-color:pink;
color:brown;
}
#panel-5 {
background-color:darkred;
color:cyan;
}
</style>
</head>
<body >
<div >
<section style="height:500px;width:100%;color: rgb(29, 121, 202);">
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section style="height:500px;width:100%;color: rgb(223, 12, 135);">
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
<section id="vane">
<div id="page-wrap">
<div class="panel" id="panel-1">
<div class="inner"><h2>Eodem Modo Typi</h2><div style="-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em;text-align:right;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><p style="font-size:500%;font-style:normal;text-align:right;">⇒</p></div>
</div>
<div class="panel" id="panel-2">
<div class="inner"><h2>Facilisis At Vero Eros</h2><div style="-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
</div>
<div class="panel" id="panel-3">
<div class="inner"><img src="http://lorempixel.com/400/400/food/" alt="Image" width="400" height="400" style="float:right;margin:0 0 0 3em;"><h2>Euismod Tincidunt</h2><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div></div>
</div>
<div class="panel" id="panel-4">
<div class="inner"><h2>Claritas est Etiam Processus Dynamicus</h2><img src="http://lorempixel.com/200/200/food/" alt="Image" width="200" height="200" style="float:right;margin:0 0 0 3em;"><div style="-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
</div>
<div class="panel" id="panel-5">
<div class="inner"><img src="http://lorempixel.com/400/400/food/" alt="Image" width="400" height="400" style="float:left;margin:0 3em 0 0;"><h2>Vulputate Velit Esse Molestie</h2><div style="-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
</div>
</div>
</section>
<section style="height:500px;width:200%; color: rgb(29, 121, 202); ">
<div >
<h2>WWF History</h2>
<p >The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</div>
</section>
<section style="height:500px;width:100%;color: rgb(223, 12, 135);">
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</div>
</body>
<script>
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(delta)
var resultado = document.getElementById('vane').scrollLeft -= (delta * 40 ); // Multiplied by 40
e.preventDefault();
console.log()
}
if (document.getElementById('vane').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('vane').addEventListener('mousewheel', scrollHorizontally, false);
// Firefox
document.getElementById('vane').addEventListener('DOMMouseScroll', scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('vane').attachEvent('onmousewheel', scrollHorizontally);
}
})();
</script>
</html>
© 2022 - 2024 — McMap. All rights reserved.