I wanna listen to scroll event on a specific element, so that there will be an arrow icon indicating more messages below after the user scrolled up the messages box. Exactly like the Youtube live chat image above.
Or is there an another way doing this?
You can listen for a scroll event on any element using the following code:
element.addEventListener(scroll, function(){
// do stuff
});
You can then get the current scroll position of that element by using element.scrollTop
From here, you can check to see if the element's scroll position is less than its total height. If it is, display your button to scroll back down. On click of the button with the down arrow, you simply use element.scrollTo() which even has built in easing effects in modern browsers. Just pass the scroll value as the height of the containing element.
