Add a Class on Horizontal Scroll With jQuery

This jQuery snippet adds and removes CSS classes as a horizontally scrolling element is scrolled. A typical use is a navigation bar that scrolls sideways on small screens: you show a shadow on the side that still has hidden items, so visitors know they can scroll.

The first line loads jQuery 3.5.1 from Google’s CDN, and the second script runs once the page is ready. Paste the whole block into your page’s HTML, for example just before </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".blog-nav-div").on("scroll", function () {
        var cur = $(this).scrollLeft();
        if (cur == 0) {
            $('.blog-nav-section').addClass('shadow-right').removeClass('shadow-left');
        } 
        else {
            var max = $(this)[0].scrollWidth - $(this).parent().width();
            if (cur == max) {
                $('.blog-nav-section').addClass('shadow-left').removeClass('shadow-right');
            } else {
                $('.blog-nav-section').addClass('shadow-right shadow-left');
            }
        }
    });
    $(".blog-nav-div").trigger("scroll");
});
</script>

How the jQuery code adds a class on horizontal scroll

• .blog-nav-div is the element that scrolls, and .blog-nav-section is the element that gets the classes. Change both selectors to match your markup.
• At the start (scrollLeft() is 0), the section gets shadow-right. At the far end, it gets shadow-left. Anywhere in between, it gets both.
• The end position is the element’s full content width (scrollWidth) minus its parent’s width, so the code assumes the scrolling element is exactly as wide as its parent.
• .trigger("scroll") runs the check once on page load, so the right shadow is there before anyone scrolls.

The snippet only toggles classes. The shadows themselves come from your own CSS rules for .shadow-left and .shadow-right. Note that the section also gets shadow-right when everything fits and there is nothing to scroll, and that every .blog-nav-section on the page changes together.

If your site already loads jQuery, remove the first <script> line so it isn’t loaded twice. In WordPress, the bundled jQuery runs in no-conflict mode and doesn’t define $, so use jQuery in its place (see fixing $ is not a function in WordPress).

Related articles

• playing a video when it scrolls into view: the same scroll-position check, vertically
• smooth scrolling to a section with jQuery: animating the scroll position instead of reading it