滚动在元素中滚动时跳跃内容/不自然移动的宽度增加

Question

我找不到这个问题的答案，但是我已经在许多应用程序（日历，议程等）中看到了这种确切的行为。正如您在我的容器下方的摘要中看到的那样，随着滚动向两侧的滚动 - 新div s插入内部。但是，当您向右滚动时，感觉还可以和自然，但是，当您向左滚动时，它总是会添加元素，并且保持0px需要稍微向后滚动，然后再次向左滚动扩展更多。最好在下面尝试：

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';

function Test() {
  const [span, setSpan] = useState<Array<number>>([-1, 0, 1]);

  // Append item to the array - scrolling right
  const append = () => {
    setSpan([
      ...span,
      span[span.length - 1] + 1,
    ]);
  };

  // Prepend item to the array - scrolling left
  const prepend = () => {
    setSpan([
      span[0] - 1,
      ...span,
    ]);
  };

  // Center view on load - to the middle of element '0' - e.i. the center
  useEffect(() => {
    const element = document.getElementById('element-0');
    if (element) {
      element.scrollIntoView({ behavior: 'auto', inline: 'center' });
    }
  }, []);

  // Register 'scroll' listener
  useEffect(() => {
    const element = document.getElementById('container');
    const scrolling = () => {
      if (element) {
        if (element.scrollLeft === 0) {
          prepend();
        }
        if (element.offsetWidth + element.scrollLeft >= (element.scrollWidth - 100)) {
          append();
        }
      }
    };
    element.addEventListener('scroll', scrolling);
    return () => {
      element.removeEventListener('scroll', scrolling);
    };
  }, [span.length]);

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}
    >
      <div
        id="container"
        style={{
          maxWidth: '50vw', maxHeight: '50vh', overflowX: 'auto', whiteSpace: 'nowrap', backgroundColor: 'red',
        }}
      >
        <div style={{ width: 'fit-content' }}>
          <div style={{ width: 'fit-content' }}>
            <div style={{ display: 'flex' }}>
              {span.map((element) => (
                <div key={`element-${element}`} id={`element-${element}`} style={{ minWidth: '40vw', minHeight: '100vh', border: '1px solid black' }}>
                  { element }
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
  <React.StrictMode>
    <Test />
  </React.StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在准备新项目之前，我尝试在编程中滚动一些滚动，但它只会引起更多问题。有一种简单的解决方法吗？

Answer 1

准备元素不会使其容器的scrollleft增加元素的宽度。

相反，scrollleft的值保持不变，因此新框有效地“ pops”到视图中：

此处您提到的是，scrollleft在插入后保持零，鼠标轮的移动不会导致容器的滚动，因此scroll未触发，因此框未评估插入逻辑。

例如，可以通过收听 <代码来解决。 >车轮 事件而不是滚动。问题是，scrollleft仍然保持在零，因此盒子只会一一出现在视图中，而不是让用户滚动到它们上。 demo 。另外，鼠标车轮不是滚动的唯一方法。

因此，根据问题的定义，我们需要手动调整滚动位置，以使视图保持与插入之前相同的元素。在这种情况下，此数量仅仅是 /code> 框的，因此解决方案可以如下：

demo

const boxWidth = document.getElementById("element-0").offsetWidth;
if (element.scrollLeft < 100) {
  element.scrollBy(boxWidth, 0);
  prepend();
}
else if (/*...*/) { 

I hope this answers your question. :)