如何修改代码实现元素左右滚动？调整初始方向及按钮触发逻辑

Hey there! Let's fix that scrolling behavior step by step. I'll break down exactly what you need to adjust in your CSS and JavaScript to get the desired effect:

1. Reset the Initial State to Start from the Left #

Your default right-button logic is likely setting the element to start on the right, so let's fix that first:

• Remove the float:right property from your element's CSS — floats are for static layout, not smooth positional transitions, which is why that tweak didn't work.
• Add a smooth transition to make the movement feel polished:

.your-target-element {
  transition: transform 0.4s ease; /* Adjust duration/timing to your preference */
  transform: translateX(0); /* Start at the leftmost visible position */
}

• In your JavaScript, initialize the XDS variable (your position tracker) to 0:

let XDS = 0; /* Starts the element at the left */

2. Tweak the Left Button Logic (e == 0) #

When clicking the left button, you want the element to move from left to right. We'll update the transform property by increasing the XDS value (positive translateX moves elements right):

if (e == 0) {
  // Example: Move the element by its full width (adjust this value to fit your layout)
  const elementWidth = document.querySelector('.your-target-element').offsetWidth;
  XDS += elementWidth;
  // Apply the new position to trigger the movement
  document.querySelector('.your-target-element').style.transform = `translateX(${XDS}px)`;
}

If you want the element to slide into view from off-screen left (instead of moving right within the container), set the initial XDS to -elementWidth, then set XDS = 0 when the left button is clicked.

3. Adjust the Right Button Logic (e == 1) #

For the right button, you want the element to move from right to left. We'll first shift the element off-screen right, then slide it left into view:

if (e == 1) {
  const elementWidth = document.querySelector('.your-target-element').offsetWidth;
  // Move the element off-screen right first
  XDS = elementWidth;
  document.querySelector('.your-target-element').style.transform = `translateX(${XDS}px)`;
  // Trigger the smooth slide-left animation
  requestAnimationFrame(() => {
    XDS = 0;
    document.querySelector('.your-target-element').style.transform = `translateX(${XDS}px)`;
  });
}

If you want the element to move left within the container (instead of sliding in from off-screen right), just decrease the XDS value directly (e.g., XDS -= elementWidth).

Quick Troubleshooting Check #

If the movement isn't behaving as expected:

• Make sure your element has position: relative or position: absolute (transform works on all elements, but positioning provides better layout context).
• Add console.log(XDS) after each button click to verify the position value is updating correctly.

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