jQuery滚动菜单无法识别左右端点问题求助

Hey there! Let's fix that scroll end detection issue you're having. The root problem here is that your current code uses the scroll event, which only fires when an element uses native scrolling (like when you have overflow: auto and scroll with a mouse or touch). But since you're moving the menu by animating the left property of a relatively positioned element, the scroll event never triggers—so your end detection logic never runs.

Here's the Fix #

Instead of relying on the scroll event, we'll calculate the menu's position relative to its container when the arrow buttons are clicked (and after the animation finishes) to check if we've hit the left or right end.

First, let's update your JavaScript with this approach:

$(function() {
  // Cache DOM elements to avoid repeated queries (better performance)
  const $container = $('.container');
  const $scrollmenu = $('.scrollmenu');
  const $leftBtn = $('#left');
  const $rightBtn = $('#right');
  
  const scrollStep = 60; // The amount we move the menu each click
  const containerWidth = $container.width();
  const menuTotalWidth = $scrollmenu[0].scrollWidth; // Total width of all menu items
  // The furthest right we can move the menu (calculated as a negative left value)
  const maxRightOffset = -(menuTotalWidth - containerWidth);

  // Helper function to update button states (optional but improves UX)
  function updateButtonStates() {
    const currentLeft = parseFloat($scrollmenu.css('left')) || 0;
    // Disable left button when we're at the left end
    $leftBtn.prop('disabled', currentLeft >= 0);
    // Disable right button when we're at the right end
    $rightBtn.prop('disabled', currentLeft <= maxRightOffset);
  }

  // Initialize button states on page load
  updateButtonStates();

  // Left arrow click handler
  $leftBtn.click(function(e) {
    e.preventDefault();
    const currentLeft = parseFloat($scrollmenu.css('left')) || 0;

    // Check if we're already at the left end
    if (currentLeft >= 0) {
      alert('left end');
      return;
    }

    // Animate the menu, then check position again after animation finishes
    $scrollmenu.stop().animate({
      left: `+=${scrollStep}px`
    }, 'slow', function() {
      updateButtonStates();
      const newLeft = parseFloat($(this).css('left'));
      if (newLeft >= 0) {
        alert('left end');
      }
    });
  });

  // Right arrow click handler
  $rightBtn.click(function(e) {
    e.preventDefault();
    const currentLeft = parseFloat($scrollmenu.css('left')) || 0;

    // Check if we're already at the right end
    if (currentLeft <= maxRightOffset) {
      alert('right end');
      return;
    }

    // Animate the menu, then check position again after animation finishes
    $scrollmenu.stop().animate({
      left: `-=${scrollStep}px`
    }, 'slow', function() {
      updateButtonStates();
      const newLeft = parseFloat($(this).css('left'));
      if (newLeft <= maxRightOffset) {
        alert('right end');
      }
    });
  });
});

Key Changes Explained #

1. Cached Elements: We store references to your container, menu, and buttons so we don't have to search the DOM every time a button is clicked.
2. Boundary Calculation: We calculate maxRightOffset—this is the negative left value that positions the menu's right edge exactly at the container's right edge.
3. Button State Updates: The updateButtonStates function disables arrows when we hit an end (a better UX than just showing an alert).
4. Animation Safety: We use stop() to prevent animation queues from building up if the user clicks buttons quickly.
5. Pre/Post Animation Checks: We check the menu's position before starting the animation (to avoid unnecessary animations) and after finishing (to catch cases where multiple clicks might push us to the end).

Optional CSS for Disabled Buttons #

Add this to your CSS to make disabled buttons look unclickable:

#left:disabled, #right:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Note for Dynamic Content #

If your menu items load dynamically (e.g., via AJAX), you'll need to recalculate menuTotalWidth and maxRightOffset after the content loads, then call updateButtonStates() again to refresh the button states.

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