Jquery mouse wheel horizontal scrolling with trackpad

Implementing Horizontal Scrolling with Trackpads and jQuery Mousewheel

Discover how to enable intuitive horizontal scrolling on web pages using jQuery and the mousewheel event, specifically catering to trackpad users for a smoother experience.

Horizontal scrolling can significantly enhance user experience for certain types of content, such as image carousels, timelines, or data tables. However, implementing it smoothly, especially for users relying on trackpads, often presents challenges. Traditional mousewheel events typically trigger vertical scrolling. This article will guide you through using jQuery to capture mousewheel events and translate them into horizontal movement, ensuring a natural feel for trackpad users.

Understanding the Challenge: Vertical vs. Horizontal Scroll

By default, browser scroll events are optimized for vertical movement. When a user scrolls their mouse wheel or trackpad, the browser interprets this as an instruction to move content up or down. For horizontal layouts, this default behavior can be frustrating, as users expect a left-to-right or right-to-left movement. The key is to intercept the scroll event and programmatically adjust the scrollLeft property of the target element.

flowchart TD
    A[User Scrolls Trackpad/Mousewheel] --> B{Browser Event Listener}
    B -->|Default Vertical Scroll| C[Scroll `scrollTop`]
    B -->|Custom Horizontal Scroll (jQuery)| D[Prevent Default Vertical]
    D --> E[Calculate Horizontal Delta]
    E --> F[Update `scrollLeft` of Target Element]
    F --> G[Smooth Horizontal Scroll]

Flowchart of default vs. custom horizontal scrolling behavior.

Setting Up Your HTML and CSS

Before diving into JavaScript, you need a basic HTML structure and some CSS to create a horizontally scrollable container. The container should have overflow-x: auto; or overflow-x: scroll; and its children should be wide enough to exceed the container's width.

<div class="scroll-container">
  <div class="scroll-content">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</div>

.scroll-container {
  width: 100%;
  height: 200px;
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Hide vertical scrollbar */
  white-space: nowrap; /* Keep items in a single line */
  border: 1px solid #ccc;
}

.scroll-content {
  display: inline-block; /* Allow content to exceed container width */
  height: 100%;
}

.item {
  display: inline-block;
  width: 150px;
  height: 180px;
  margin: 10px;
  background-color: #f0f0f0;
  border: 1px solid #aaa;
  text-align: center;
  line-height: 180px;
  font-size: 1.2em;
}

Implementing Horizontal Scrolling with jQuery Mousewheel

To achieve horizontal scrolling, we'll use jQuery to listen for the mousewheel event. This event provides deltaX and deltaY properties, which are crucial for distinguishing between vertical and horizontal scroll intentions, especially on trackpads. We'll prevent the default vertical scroll and instead use the deltaY (or deltaX if available and preferred) to adjust the scrollLeft property of our container.

$(document).ready(function() {
  // Ensure you have a jQuery mousewheel plugin included, e.g., from Brandon Aaron
  // <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

  $('.scroll-container').on('mousewheel', function(event) {
    event.preventDefault(); // Prevent default vertical scroll

    var delta = event.deltaY || event.deltaX; // Use deltaY for trackpads, deltaX for some mice
    var scrollAmount = delta * -10; // Adjust scroll speed as needed

    // Animate scroll for a smoother experience
    $(this).stop().animate({
      scrollLeft: $(this).scrollLeft() + scrollAmount
    }, 100); // Animation duration in milliseconds
  });
});

Explanation of the JavaScript Logic

1. $(document).ready(function() { ... });: Ensures the script runs after the DOM is fully loaded.
2. $('.scroll-container').on('mousewheel', function(event) { ... });: Attaches an event listener to our scroll container for the mousewheel event. This event is provided by the jQuery mousewheel plugin.
3. event.preventDefault();: This is crucial. It stops the browser's default vertical scrolling behavior when the mousewheel event occurs on our container.
4. var delta = event.deltaY || event.deltaX;: The event object provided by the mousewheel plugin contains deltaY (for vertical scroll) and deltaX (for horizontal scroll). Trackpads often report vertical scroll as deltaY even when the user intends horizontal movement, so we use deltaY primarily. If deltaY is not available or zero, deltaX can be used as a fallback.
5. var scrollAmount = delta * -10;: We multiply the delta by a factor (e.g., -10) to control the scroll speed. The negative sign is often needed to make the scroll direction intuitive (scrolling 'down' on a trackpad moves content 'right'). Adjust this value to fine-tune the scrolling speed.
6. $(this).stop().animate({ scrollLeft: $(this).scrollLeft() + scrollAmount }, 100);: This line performs the actual horizontal scroll.
   • $(this) refers to the .scroll-container.
   • .stop() prevents animation queuing, ensuring only the latest scroll command is executed.
   • .animate() provides a smooth scrolling effect by gradually changing the scrollLeft property over 100 milliseconds.
   • $(this).scrollLeft() + scrollAmount calculates the new horizontal scroll position.