使用jInvertScroll构建横向滚动站点，点击元素水平居中滚动实现遇阻

Hey there! I’ve messed around with jInvertScroll a fair bit, so let’s figure out how to get that smooth horizontal centering animation working when users click your elements. The main issue with your earlier attempts is that jInvertScroll uses a unique scroll mapping (it converts vertical scroll input to horizontal movement), so regular scroll methods or plugins won’t play nice with it. Here’s a solution that works with its native behavior:

How It Works #

jInvertScroll ties window scrollTop values to horizontal movement of your scroll container. Instead of trying to directly manipulate horizontal scroll, we’ll calculate the correct scrollTop value needed to center your target element, then animate that value—jInvertScroll will handle the horizontal translation automatically.

Step-by-Step Code Implementation #

First, make sure you have your jInvertScroll initialized (adjust the selector and height to match your setup):

$.jInvertScroll(['.scroll-container'], {
  height: 6000, // This is the "virtual" vertical height that maps to your horizontal scroll length
  onScroll: function(percent) {
    // Optional scroll callback
  }
});

Next, add the click handler for your target elements:

// Replace .clickable-element with your actual element selector
$('.clickable-element').on('click', function() {
  const $target = $(this);
  const viewportWidth = $(window).width();
  const $scrollContainer = $('.scroll-container');
  
  // Calculate total scrollable horizontal distance (container width minus viewport width)
  const totalHorizontalScroll = $scrollContainer.width() - viewportWidth;
  // Match this to the height value you set in jInvertScroll initialization
  const invertScrollVirtualHeight = 6000;

  // Get the horizontal center position of the target element (relative to the document)
  const elementCenterX = $target.offset().left + ($target.outerWidth() / 2);
  // Calculate where we need to scroll horizontally to center the element in the viewport
  const desiredHorizontalScroll = elementCenterX - (viewportWidth / 2);

  // Clamp the value to prevent scrolling beyond the container bounds
  const clampedScrollX = Math.max(0, Math.min(desiredHorizontalScroll, totalHorizontalScroll));
  // Convert horizontal scroll value to the corresponding scrollTop for jInvertScroll
  const desiredScrollTop = (clampedScrollX / totalHorizontalScroll) * invertScrollVirtualHeight;

  // Animate the scrollTop—jInvertScroll will handle the horizontal movement
  $('html, body').animate({
    scrollTop: desiredScrollTop
  }, 800); // Adjust 800 to change animation speed (in milliseconds)
});

Key Notes to Avoid Issues #

• Match the Virtual Height: Make sure invertScrollVirtualHeight exactly matches the height value you used when initializing jInvertScroll. If these don’t align, your centering will be off.
• Dynamic Width Handling: If your scroll container or viewport changes size (e.g., responsive design), the code above calculates totalHorizontalScroll on click, so it’ll adapt automatically.
• No Conflict with jInvertScroll: This method uses jInvertScroll’s native scroll trigger (scrollTop), so it won’t clash with the plugin’s internal logic—unlike plugins that try to manipulate scrollLeft directly.

If you run into edge cases (like elements near the start/end of the container), the Math.max/Math.min clamping ensures you don’t scroll beyond the valid range.

内容的提问来源于stack exchange，提问作者Delgado