How can I create a button that acts like a horizontal scroll bar?

I have a side-scrolling element that users can navigate through using a simple horizontal scroll bar. However, I want to add some buttons on the side to move forward or backward like 2 pictures and animate it.

I'm not very familiar with JQuery but would something like this be possible? I know that the scroll bar isn't technically part of the DOM but is actually part of the browser, but is there any way to interact with it?

Answers 1

  • For you case your can use jQuery's $('.elm').scrollLeft(200) to scroll the element to the left position 200 if you want to scroll to right there is no method for this because this .scrollLeft(-100) can do the magic for scrolling an element to the right.

    For more info about jQuery .scrollLeft() follow this link: https://api.jquery.com/scrollleft/

    I wrote a basic demo for you and hope it to be helpful.

    Working demo link: http://codepen.io/anon/pen/EKoVOj?editors=0010

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery Horizontal Scroll Demo</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div>
        <button class="scroll-btn scroll-to-left" type="button">&larr;</button>
        <p>Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Etiam vitae tortor. Vivamus laoreet. Cras dapibus. Nam pretium turpis et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tincidunt tincidunt erat. Donec venenatis vulputate lorem. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Phasellus gravida semper nisi. Morbi vestibulum volutpat enim. Curabitur a felis in nunc fringilla tristique. Phasellus accumsan cursus velit. Praesent venenatis metus at tortor pulvinar varius. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Sed in libero ut nibh placerat accumsan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In hac habitasse platea dictumst. Curabitur a felis in nunc fringilla tristique. Curabitur suscipit suscipit tellus. Donec mollis hendrerit risus. Sed lectus. Sed fringilla mauris sit amet nibh. Praesent ac massa at ligula laoreet iaculis.</p>
        <button class="scroll-btn scroll-to-right" type="button">&rarr;</button>
      </div>
      <script src="script.js"></script>
    </body>
    </html>
    

    style.css

    div {
      background: tomato;
      color: white;
      font-size: larger;
      font-family: Calibri;
      margin: 50px auto;
      padding: 20px 20px 10px;
      overflow-x: scroll;
      height: 160px;
      width: 500px;
      position: relative;
    }
    
    div > p {
      margin: 0;
      width: 1500px;
    }
    
    .scroll-btn {
      background: lightblue;
      color: blue;
      border: none;
      padding: 2px 10px;
      font-size: xx-large;
      position: fixed;
      top: 0;
    }
    
    .scroll-btn:hover {
      background: blue;
      color: lightblue;
      cursor: pointer;
    }
    
    .scroll-btn.scroll-to-left { left: 0; }
    .scroll-btn.scroll-to-right { right: 0; }
    

    script.js

    $(function() {
      'use strict';
    
      var scrollingValue = 30;
      var scrollbarPosition = 10;
    
      function getMaxChildWidth( elm ) {
        var childrenWidth = $.map($('>*', elm), function(el) { return $(el).width() });
        var max = 0;
        for (var i = 0; i < childrenWidth.length; i++) {
          max = childrenWidth[i] > max ? childrenWidth[i] : max;
        }
        return max;
      }
    
      function getScrollingValue(toLeft, ctx) {
    
        if (toLeft) {
          return scrollbarPosition < 1 ? 0 : scrollingValue;
        }
        return scrollbarPosition >= getMaxChildWidth(ctx) ? 0 : scrollingValue;
      }
    
      $('.scroll-btn.scroll-to-left').on('click', function() {
        $(this).parent().scrollLeft(
          scrollbarPosition -= getScrollingValue(true, $(this).parent())
        );
      });
    
      $('.scroll-btn.scroll-to-right').on('click', function() {
        $(this).parent().scrollLeft(
          scrollbarPosition += getScrollingValue(false, $(this).parent())
        );
      });
    });
    

Related Articles