Menu
Basically I have a website with horizontally scrolling content. As in the whole page scrolls horizontally, not just a div.
I am trying to implement left and right arrow buttons that onmousedown or hover (it doesn't matter too much which one yet), scrolls the whole window (smoothly) left and right.
This website does pretty much what I want with the little centred arrows: http://www.clholloway.co.za
Can anyone help with this? Cheers.
560
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.
I think with a little bit of jQuery you can achieve what you are looking for. The basic idea is to handle some event (onmouseenter, mousedown, etc...) that you can then use to kick off the scrolling.
Imagining you have some markup that looks like this:
<div id="parent">
<div class="contentBlock">1</div>
<div class="contentBlock">2</div>
<div class="contentBlock">3</div>
<div class="contentBlock">4</div>
<div class="contentBlock">5</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>
And a few styles to ensure it will cause the window to scroll:
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:400px;
width:500px;
margin:10px;
border:1px solid black;
float:left;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active{
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
You can use a combination of styling, setInterval, and jQuery.scrollLeft() to achieve the effect you want.
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $(window);
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
Full jsFiddle demonstrating this approach: http://jsfiddle.net/jwcarroll/atAHh/
153
I have created this Fiddle for you to help. Take a look and see if it helps point you in the right direction. You'll likely have to adapt it to your situation, but hope it does what you need.
Please note I put overflow:hidden on the <body> so explicit scrollbars don't display; change if desired.
Cheers!
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
