JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div id="app" @scroll="handleScroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales sit amet lectus quis interdum. Mauris hendrerit, purus vitae vulputate pharetra, enim mauris consectetur nulla, ut sollicitudin magna turpis in erat. Integer eleifend ac nulla rhoncus aliquam. Nam consectetur magna vel semper pulvinar. Fusce sagittis tempus lacus, eu ullamcorper elit. Nullam euismod in justo eget mollis. In condimentum neque sit amet ligula tincidunt tempor. Integer cursus nisl a quam gravida, vitae convallis ipsum auctor. Donec ipsum justo, sollicitudin ut nunc bibendum, fringilla dignissim metus. Maecenas bibendum iaculis dictum. Ut rutrum sapien eget metus fringilla, vel consectetur metus ultrices. Vestibulum convallis vitae lorem non accumsan. Nam non felis dolor. Duis vitae libero molestie metus feugiat sollicitudin ac vel metus.
    </p>
    <p>
        Aenean sit amet est lacus. Suspendisse a mi sodales eros lobortis commodo et eget augue. Vivamus accumsan imperdiet elit sed luctus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque, neque eget iaculis tincidunt, tortor neque ornare quam, et lacinia velit dolor quis nulla. Phasellus pharetra lorem ut dui ultrices, id dictum est laoreet. Nullam aliquet ornare cursus.
    </p>
    <p>
        Nunc ut erat egestas, suscipit orci sit amet, aliquam mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam in vestibulum magna. In lorem nisi, euismod rutrum velit eu, vestibulum imperdiet nisi. Nulla rutrum enim ut pulvinar auctor. Donec enim massa, accumsan ac libero et, elementum iaculis mauris. Suspendisse a metus ultricies, eleifend neque sit amet, vulputate sapien. Aenean mollis nunc nec dui condimentum, ut maximus dui pellentesque. Sed hendrerit, leo non rhoncus ullamcorper, arcu purus porttitor sem, quis varius enim libero ut nisl. Aenean blandit vulputate nisi et convallis.
    </p>
    <p>
       ...

CSS

#app {
    max-height: 300px;
    overflow-y: scroll;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        scrollPosition: 0,
    },
    methods: {
    	handleScroll: function(e) {
            var currentScrollPosition = e.srcElement.scrollTop;
            if (currentScrollPosition > this.scrollPosition) {
                console.log("Scrolling down");
            }
            this.scrollPosition = currentScrollPosition;
		}
	}
});