Detecting Mousescroll using Javascript

Detecting Mousescroll using Javascript

Postby kawstov » Wed May 31, 2017 5:15 pm

Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    border: 1px solid black;
}
</style>
</head>
<body>

<div>This example uses the addEventListener() method to attach a "wheel" event to a DIV element. Roll the mouse wheel over me - either up or down!</div>

<p>A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.</p>

<p><strong>Note:</strong> The wheel event is not supported in Safari and IE8 (and earlier).</p>

<script>
window.addEventListener('mousewheel', function(e){
    wDelta = e.wheelDelta < 0 ? alert('down') : alert('up');
    console.log(wDelta);
});
</script>

</body>
</html>
Cheers!
Kawstov
kawstov
Site Admin
 
Posts: 119
Joined: Tue May 28, 2013 10:51 pm

Re: Detecting Mousescroll using Javascript

Postby kawstov » Wed May 31, 2017 5:42 pm

Animate Scroll to top:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
body {
    width: 5000px;
    height: 5000px;
}

button {
    position: absolute;
}
</style>
</head>
<body>

<p>Click the button to scroll the document window by 100px horizontally.</p>

<p>Look at the horizontal scrollbar to see the effect.</p>

<button onclick="scrollWind()">Click me to scroll down!</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button onclick="scrollToTop(399);">Click me to scroll up!</button><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button onclick="scrollToTop(399);">Click me to scroll up!</button><br><br>
<script>
function scrollWind() {
    window.scrollBy(0, 1650);
}

function scrollToTop(scrollDuration) {
const   scrollHeight = window.scrollY,
        scrollStep = Math.PI / ( scrollDuration / 15 ),
        cosParameter = scrollHeight / 2;
var     scrollCount = 0,
        scrollMargin,
        scrollInterval = setInterval( function() {
            if ( window.scrollY != 0 ) {
                scrollCount = scrollCount + 1; 
                scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
                window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
            }
            else clearInterval(scrollInterval);
        }, 15 );
}
</script>

</body>
</html>
Cheers!
Kawstov
kawstov
Site Admin
 
Posts: 119
Joined: Tue May 28, 2013 10:51 pm

Re: Detecting Mousescroll using Javascript

Postby kawstov » Wed May 31, 2017 6:21 pm

Linear Scroll Up and Down
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
body {
    width: 5000px;
    height: 5000px;
}

button {
    position: absolute;
}
</style>
</head>
<body>

<p>Click the button to scroll the document window by 100px horizontally.</p>

<p>Look at the horizontal scrollbar to see the effect.</p>

<button onclick="scrollWind(399)">Click me to scroll down!</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button onclick="scrollToTop(399);">Click me to scroll up!</button><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button onclick="scrollToTop(399);">Click me to scroll up!</button><br><br>
<script>
function scrollWind(scrollDuration) {
    var scrollStep = 5,
        scrollInterval = setInterval(function(){
        if ( window.scrollY < 700 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval);
    },7);
}

function scrollToTop(scrollDuration) {
var scrollStep = -5,
        scrollInterval = setInterval(function(){
        if ( window.scrollY > 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval);
    },7);
}
</script>

</body>
</html>
Cheers!
Kawstov
kawstov
Site Admin
 
Posts: 119
Joined: Tue May 28, 2013 10:51 pm


Return to Daily Scratch

Who is online

Users browsing this forum: No registered users and 1 guest

cron