What is the best way to add an undetectable scrollable section to an HTML page?

Question

What is the best way to add an undetectable scrollable section to an HTML page?

I am looking to create an event that triggers whenever the user scrolls up or down within a hidden div called a 'scroller'. Here is the 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);
});

When the user scrolls inside the above div, the word "scrolling" should be displayed on the screen. You can test it out with this fiddle : http://jsfiddle.net/f1hxndt4/4/

There are two issues with the current setup :

The scrolling within the 'scroller' needs to be continuous in both directions (up and down) - Currently restricted to 50000px scroll.
The "scroller" must be invisible. Currently, the scrollbars are visible.

Any helpful suggestions would be highly appreciated, thank you!

javascript jquery html css scroll

Answer 1

Answer №1

For those who are curious, here is the solution: 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 :

To achieve this effect, create a scrollable <div> : $('#scroller .parent') and nest it inside a narrower <div> : $('#scroller'). Ensure that the overflow of the outer div is set to 'hidden'.

By doing so, the scrollbar on the right side of $('#scroller .parent') will be concealed.

Answer 2

For those who are curious, here is the solution: 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 :

To achieve this effect, create a scrollable <div> : $('#scroller .parent') and nest it inside a narrower <div> : $('#scroller'). Ensure that the overflow of the outer div is set to 'hidden'.

By doing so, the scrollbar on the right side of $('#scroller .parent') will be concealed.

Answer 3

Answer №2

If you attach an event listener to the 'scroll' event, you will have to ensure that the area is scrollable, which may not align with your intended outcome. Rather than this approach, consider listening for events that typically trigger scrolling actions, such as mousewheel or swipe gestures.

To calculate the distance scrolled, you can utilize the wheelData property of the event object to determine the scroll delta. (For Firefox and Opera browsers, you may 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);
});

Answer 4

If you attach an event listener to the 'scroll' event, you will have to ensure that the area is scrollable, which may not align with your intended outcome. Rather than this approach, consider listening for events that typically trigger scrolling actions, such as mousewheel or swipe gestures.

To calculate the distance scrolled, you can utilize the wheelData property of the event object to determine the scroll delta. (For Firefox and Opera browsers, you may 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);
});

Answer 5

Answer №3

Example: http://jsfiddle.net/techmind/x4k6s3j9/ Enhanced Version: http://jsfiddle.net/techmind/x4k6s3j9/1/

This solution is similar to the original link you shared but it doesn't depend on the scrolling amount. Instead, it generates its own data based on mousewheel input. I aimed to address your initial issue directly.

If you have any questions or need clarification, feel free to ask. (Note: This code snippet does not utilize jQuery as part of a 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();

Answer 6

Example: http://jsfiddle.net/techmind/x4k6s3j9/ Enhanced Version: http://jsfiddle.net/techmind/x4k6s3j9/1/

This solution is similar to the original link you shared but it doesn't depend on the scrolling amount. Instead, it generates its own data based on mousewheel input. I aimed to address your initial issue directly.

If you have any questions or need clarification, feel free to ask. (Note: This code snippet does not utilize jQuery as part of a 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();

What is the best way to add an undetectable scrollable section to an HTML page?

Answer №1

Answer №2

Answer №3

Similar questions

A few of the input fields I filled out are not getting sent to the PHP script

The submit function for Ajax is not functioning properly

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

Error encountered in Three JS Drag Controls: Unable to assign value to property 'x' as it is undefined

Steps to substituting characters within a date string

The content in tinymce cannot be edited or removed

What is the reason for AngularJS's inclusion of a colon at the end of a data object in an $http post

Update the ng-model using an Angular service

What is the process for implementing JavaScript in Django?

Tips for adding a placeholder in a login form on Drupal 7

How is it possible for the web browser to display fonts like Open Sans even if they are not installed on my device?

What is the best way to position a div vertically on the right side of another div?

Using jQuery to retrieve information and calculate total sum

One handy feature in PHP or JavaScript allows users to delete items by simply

Master the art of handling JSON data within an Angular controller

"Expand" Button following X buttons

I am experiencing issues with Jquery ajax JSON not functioning properly on my webserver when accessing my pages

What is the most effective method for maintaining a stable page connection?

Need to double-click to open my component

Ways to center text within a nested div in a parent div with table-cell styling