JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div class="box">
    <div class="scroll-btn up"></div>
    <div class="scroll-btn down"></div>
    <div class="comments">
        <div class="comment">111</div>
        <div class="comment">222</div>
        <div class="comment">333</div>
        <div class="comment">444</div>
        <div class="comment">555</div>
    </div>
</div>

CSS

.box {
    position: relative;
}

.box .comments {
    border: 1px solid #17F;
    max-height: 12rem;
    overflow-y: hidden;
}

.box .comment {
    border: 1px solid #1F7;
    height: 5rem;
    line-height: 5rem;
    padding: 0 2rem;
}

.scroll-btn {
    position: absolute;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background: #F17;
    cursor: pointer;
}

.scroll-btn.up {
    top: 1rem;
}

.scroll-btn.down {
    bottom: 1rem;
}

JavaScript

var $comments = $('.comments');

var updateArrows = function() {
    if ($comments.scrollTop() == 0) {
        $('.up').hide();
    } else {
        $('.up').show();
    }

    if($comments.scrollTop() + $comments.height() == $comments.prop('scrollHeight')) {
        $('.down').hide();
    } else {
        $('.down').show();
    }
};

$('.up').click(function() {
    $comments.animate({scrollTop: $comments.scrollTop() - 100}, 200, updateArrows);
});

$('.down').click(function() {
    $comments.animate({scrollTop: $comments.scrollTop() + 100}, 200, updateArrows);
});

updateArrows();