JSFiddle - React, Tailwind, and code Playground

by Md Shah

HTML

<div id='main'>
    <div>Try scrolling this DIV.</div>
    <p>Paragraph - <span>Scroll happened!</span>

    </p>
</div> <a href="#">Click Here After Scrolling above Div</a>

CSS

div#main {
    border: 2px solid gray;
    height: 300px;
    overflow: scroll;
    width: 500px;
}
div#header {
    height: 20ps;
}
div {
    color: blue;
}
p {
    color: green;
}
span {
    color: red;
    display: none;
}

JavaScript

$("p").clone().appendTo('#main');
$("p").clone().appendTo('#main');
$("p").clone().appendTo('#main');
$("p").clone().appendTo('#main');
$("p").clone().appendTo('#main');

/*** Actual Code Starts Here... ***/

/* Function which holds on window scroll operations */
function scrollFunction() {
    $("span").css("display", "inline").fadeOut("slow");
}

/* Binding scroll event handler */
$('div#main').on('scroll', scrollFunction);

/* Link click event */
$('a').on("click", function (e) {

    /* Unbinding the window scroll event handler */
    $('div#main').off('scroll');
    
    /* Perform scroll operation */
    $('#main').animate({
        scrollTop: 0
    }, 'fast');

    /* Binding back the window scroll event handler after a delay of 2 seconds */
    setTimeout(function () {
        $('div#main').on('scroll', scrollFunction);
    }, 2000);
});

/*** Actual Code Ends Here... ***/