Horizontal Scroll with buttons

by Chun

HTML

<div class="qa-slide-menu">
<div class="qa-sp-container"><div class="qa-slide-previous chevron"></div></div>
<div class="qa-nav-sub">
<ul class="qa-nav-sub-list">
<li class="qa-nav-sub-item qa-nav-sub-admin-general">
<a href="./index.php?qa=admin&amp;qa_1=general" class="qa-nav-sub-link qa-nav-sub-selected">General</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-emails">
<a href="./index.php?qa=admin&amp;qa_1=emails" class="qa-nav-sub-link">Emails</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-users">
<a href="./index.php?qa=admin&amp;qa_1=users" class="qa-nav-sub-link">Users</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-layout">
<a href="./index.php?qa=admin&amp;qa_1=layout" class="qa-nav-sub-link">Layout</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-posting">
<a href="./index.php?qa=admin&amp;qa_1=posting" class="qa-nav-sub-link">Posting</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-viewing">
<a href="./index.php?qa=admin&amp;qa_1=viewing" class="qa-nav-sub-link">Viewing</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-lists">
<a href="./index.php?qa=admin&amp;qa_1=lists" class="qa-nav-sub-link">Lists</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-categories">
<a href="./index.php?qa=admin&amp;qa_1=categories" class="qa-nav-sub-link">Categories</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-permissions">
<a href="./index.php?qa=admin&amp;qa_1=permissions" class="qa-nav-sub-link">Permissions</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-pages">
<a href="./index.php?qa=admin&amp;qa_1=pages" class="qa-nav-sub-link">Pages</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-feeds">
<a href="./index.php?qa=admin&amp;qa_1=feeds" class="qa-nav-sub-link">RSS feeds</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-points">
<a href="./index.php?qa=admin&amp;qa_1=points" class="qa-nav-sub-link">Points</a>
</li>
<li class="qa-nav-sub-item qa-nav-sub-admin-spam">
<a...

CSS

.qa-slide-menu {
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

.chevron {
    font-family: 'Material Icons';
    font-size: 18px;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: .3rem;
    border-radius: 30px;
    box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);
    cursor: pointer;
}

.qa-nav-sub {
    flex-grow: 1;
    width: 200px;
    overflow-x: scroll;
}

ul.qa-nav-sub-list {
    white-space: nowrap;
}

.qa-nav-sub-item {
    display: inline-block;
    float: none;
}

JavaScript

var slideStep = 100;
var scrolling = true;

// Wire up events for the 'scrollUp' link:
$('.qa-slide-previous').on('click', function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // slideStep.
    $('.qa-nav-sub').animate({
        scrollLeft: '-=' + slideStep + 'px'
    });
});

$('.qa-slide-next').on('click', function(event) {
    event.preventDefault();
    $('.qa-nav-sub').animate({
        scrollLeft: '+=' + slideStep + 'px'
    });
});



$('.qa-nav-sub').scroll( function() {
    var $width = $('.qa-nav-sub').outerWidth();
    var $scrollWidth = $('.qa-nav-sub')[0].scrollWidth; 
    var $scrollLeft = $('.qa-nav-sub').scrollLeft();

    var offset=50;

    if ($scrollLeft>= $width + 50){
        console.log('right end');
    }
    if ($scrollLeft===0){
        console.log('left end');
    }
});