How do I create an invisible scrollable area on an HTML page?

Question

I want to trigger an event whenever the user scrolls up or down inside an invisible div (a 'scroller'). Imagine the below setup :

CSS

#scroller {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50px;
}
#scroller div {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50000px;
    width: 100%;
}
span {
    position: absolute;
    top: 20px;
    left: 100px;
}

HTML

<div id="scroller"><div></div></div>
<span></span>

Javascript

var timeout;
$("#scroller").scroll(function ()
{
    clearTimeout(timeout);
    $('span').text('scrolling');
    timeout = setTimeout(function ()
    {
       $('span').text('');
    }, 1000);
});

Whenever the user scrolls inside the above div, the word "scrolling" should appear on the screen. You can play around with this fiddle : http://jsfiddle.net/f1hxndt4/4/

There are two problems with the above :

Scrolling inside the 'scroller' obviously needs to be infinite (up and down) - Currently it only allows a 50000px scroll.
The "scroller" needs to be invisible. Currently the scrollbars are visible.

Any suggestions would be much appreciated, thank you!

I think you need to fake scrollable content by adjusting the y offset on mousewheel, not scroll. So you have a parent element with a fixed width/height, having overflow hidden. Then inside you have your infinite element, which can be anything. Then you may need listeners like parent - on mouseenter and mouseleave setting a boolean value that is checked on mousewheel (plugin: https://github.com/brandonaaron/jquery-mousewheel/) - that's how I would begin at least. — Kai Qing, Sep 12 '14 at 16:17
This might already answer your question: http://stackoverflow.com/questions/10313142/javascript-capture-mouse-wheel-event-and-do-not-scroll-the-page — David, Sep 12 '14 at 16:29
Put the invisible scroll box inside an overflow hidden div that is narrower(to hide the scrollbar) then use a setTimeout/clearTimeout combo with the on scroll listener to reset your scroll position to produce a fake infinity effect — nepeo, Sep 12 '14 at 16:50
why? do you just want to detect scrolling without user being able to scroll especially when his cursor is at some place? — Muhammad Umer, Sep 12 '14 at 17:07

score 0 · Accepted Answer · answered Sep 12 '14 at 17:02

Here is the solution in case anyone is interested : http://jsfiddle.net/f1hxndt4/14/

CSS

#scroller{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50px;
    overflow: hidden;
}
#scroller .parent{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100px;
    overflow-x:hidden;
}
#scroller .child {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50000px;
    width: 100%;
}

span {
    position: absolute;
    top: 20px;
    left: 100px;
}

HTML

<div id="scroller">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
<span></span>

Javascript

var timeout;
$("#scroller .parent").scroll(function ()
{
    clearTimeout(timeout);
    $('span').text('scrolling');
    timeout = setTimeout(function ()
    {
       $('span').text('');
    }, 1000);
});

Explanation :

You need to create a scrollable <div> : $('#scroller .parent') and then place that inside a narrower <div> : $('#scroller'). Set the overflow of the latter to 'hidden'.

That way the scrollbar on the right side of $('#scroller .parent') will not be visible anymore.

score -1 · Answer 2 · edited Sep 12 '14 at 16:44

-1

If you bind to the 'scroll' event, then you will need to make the area scrollable (which as you say, defeats the point of the what you're trying to acheive!). Instead, you need to listen for the events that would otherwise usually cause scrolling, such as listening for mousehweel events. You may also wish to listen for swipe events etc.

You can calculate scroll distance by using the wheelData property of the event to detemrine the scroll delta. (In Firefox and opera you will need to use the detail property instead.)

var onMouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll"
                                                               : "mousewheel";
var timeout;
$("#scroller").on(onMouseWheelEvent, function (e)
{
    clearTimeout(timeout);
    $('span').text('scrolling');

    var scrollEvent = e.originalEvent;
    var delta = scrollEvent.detail? scrollEvent.detail*(-120) : scrollEvent.wheelDelta
    console.log(e.originalEvent.wheelDelta);

    timeout = setTimeout(function ()
    {
       $('span').text('');
    }, 1000);
});

edited Sep 12 '14 at 16:44

Hashem Qolami

97,268
26
150
164

answered Sep 12 '14 at 16:20

Khior

1,244
1
10
20

Hey Khior, thanks for the answer. I've already tried that and I know it works fine but I want to use jQuery's `.scroll();` so that I know how far (in pixels), up or down, the user scrolls each time. Does the `onMouseWheelEvent` make available such values ? – Kawd Sep 12 '14 at 16:23
I'm afraid the values returned by this event will not do. This mousewheel event does not return the total number of pixels covered. I want to rotate an element based on scroll like this guy : http://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery but I need the element to rotate only when an invisible part of the page is scrolled up or down. However, I'll need the number of pixels scrolled in order to relate that to the rotation. – Kawd Sep 12 '14 at 16:41
I figured it out after all. I found a way to hide the scrollbars : http://jsfiddle.net/f1hxndt4/13/. Now I need to think of some logic to make the scrolling infinite. – Kawd Sep 12 '14 at 16:54
you can get total number of pixels element has been scrolled. https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop – Muhammad Umer Sep 12 '14 at 17:09

Muhammad Umer · Answer 3 · 2014-09-12T20:23:40.320

Demo: http://jsfiddle.net/techsin/o2n2q5p4/ Improved: http://jsfiddle.net/techsin/o2n2q5p4/1/

This is similar to link you posted however it dosen't rely on scrolled up amount but creates its own amount relying on mousewheel data. I tried to solve your original problem instead.

if anything is unclear just ask: (no jquery used just for challenge)

var a=0, topSpeed = 20, deg=0;

window.addEventListener('mousewheel', function(e){
    if (a<topSpeed) {
        a = a + ((e.wheelDelta/1000) * topSpeed);
    }

});

var img = document.getElementById('gear');

function animate() {
    a = +(a*.95).toFixed(2);
    if (Math.abs(a)<1) a=0;
    deg = (deg+a) % 360;
    img.style.transform = 'rotate('+deg+'deg)';
    requestAnimationFrame(animate);
}

animate();

How do I create an invisible scrollable area on an HTML page?

3 Answers3