如何用Protractor实现Div水平滚动？已尝试方法未生效

Hey there! Let's work through this horizontal scrolling issue with your div. The scrollIntoView(true) method you tried is perfect for vertical alignment, but it doesn't prioritize horizontal scrolling by default—that's probably why it didn't work as expected. Here are a few reliable alternatives to get that horizontal scroll working:

1. Use scrollIntoView with explicit horizontal alignment options #

Instead of just passing true, use an options object to tell the browser to focus on horizontal positioning. This lets you align the element exactly where you need it in the scrollable container:

await browser.executeScript(`
  arguments[0].scrollIntoView({
    behavior: 'smooth', // Use 'auto' if you want instant scrolling
    block: 'nearest',   // Keeps the vertical position unchanged
    inline: 'end'       // Aligns the element to the RIGHT edge of its container
  });
`, element.getWebElement());

Swap inline: 'end' with inline: 'start' if you need to scroll the element to the left side instead.

2. Directly manipulate the container's scrollLeft property #

Sometimes scrollIntoView can be finicky if the container has custom overflow rules. Directly setting the scrollLeft value of the scrollable parent is often more reliable:

// Scroll the container all the way to the right
await browser.executeScript(`
  const scrollContainer = arguments[0].closest('[style*="overflow-x"]'); // Find the scrollable parent
  scrollContainer.scrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
`, element.getWebElement());

If you need to scroll directly to the element's position (not just the far right), calculate it like this:

await browser.executeScript(`
  const targetElement = arguments[0];
  const scrollContainer = targetElement.parentElement; // Adjust if container isn't the direct parent
  scrollContainer.scrollLeft = targetElement.offsetLeft - scrollContainer.offsetLeft;
`, element.getWebElement());

3. Use scrollBy for incremental horizontal scrolling #

If you need to scroll a specific number of pixels (instead of scrolling to an element), use the scrollBy method on the container:

await browser.executeScript(`
  const scrollContainer = document.getElementById('your-scrollable-div-id');
  // Scroll 400px to the right smoothly
  scrollContainer.scrollBy({ left: 400, behavior: 'smooth' });
`);

Quick checks to avoid common pitfalls #

• Double-check that your scrollable div has overflow-x: auto or overflow-x: scroll set in its CSS—without this, the container won't be able to scroll horizontally at all.
• Make sure the target element is actually inside the scrollable container (not nested under a parent with overflow: hidden).
• Wait for the element to be fully visible/rendered before attempting to scroll to it—use WebDriver's explicit waits if needed.

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