[BUG] Fast Scrolling

[lispz1610]

Upon scrolling through the mouse wheel, or scroll-thumb or by clicking in any part of the scroll-track, the scroll becomes very fast. A time ago, that bug happenned just some times, but now it has happenned always. I also noticed this bug sometimes happens in one of the examples from react-virtuoso.

Unfortunately, I can't reproduce it in CodeSandbox, so I'll provide a video showing the problem occurring, and my snippet code here:

Video

Code

<TableVirtuoso
  data={tableData.rows}
  defaultItemHeight={50}
  components={{
    Table: ({ children, ...props }) => (
      <table {...props}>
        <thead>
          <tr className="headers">
            <th></th>
            {[...tableData.pinnedColumns, ...tableData.unpinnedColumns].map(
              (header, headerIndex) => {
                const noteIndex = tableData.headers.indexOf(header);
                const note = tableData.headerNotes[noteIndex];
                let pinned = false;

                if (headerIndex < tableData.pinnedColumns.length) {
                  pinned = true;
                }

                return (
                  <th
                    key={header}
                    className={`${note ? "hasNote" : ""} ${
                      pinned ? "pinned" : ""
                    }`}
                    style={{
                      left: pinned ? `${27 * headerIndex + 5}rem` : undefined
                    }}
                  >
                    <span>{header}</span>
                    <div>
                      <button
                        type="button"
                        onClick={() =>
                          pinned ? handleUnpin(header) : handlePin(header)
                        }
                      >
                        <img
                          src={pinned ? pinIcon : pinOutlinedIcon}
                          alt="Pin"
                        />
                      </button>
                      <button type="button">
                        <img src={closeIcon} alt="Remove" />
                      </button>
                    </div>
                    {note && (
                      <div className="note">
                        {note.split("\n").map((line, index) => (
                          <p key={index}>{line}</p>
                        ))}
                      </div>
                    )}
                  </th>
                );
              }
            )}
          </tr>
        </thead>
        {children}
      </table>
    ),
    TableRow: (props) => (
      <tr
        {...props}
        className={props["data-index"] % 2 ? "oddRow" : "evenRow"}
      ></tr>
    )
  }}
  itemContent={(index, row) => (
    <>
      <td>{index + 1}</td>
      {[...tableData.pinnedColumns, ...tableData.unpinnedColumns].map(
        (header, headerIndex) => {
          const note = tableData.rowNotes[index][header];

          let pinned = false;

          if (headerIndex < tableData.pinnedColumns.length) {
            pinned = true;
          }

          return (
            <td
              key={header}
              className={`${note ? "hasNote" : ""} ${pinned ? "pinned" : ""}`}
              style={{
                left: pinned ? `${27 * headerIndex + 5}rem` : undefined
              }}
            >
              {row[header]}
              {note && (
                <div className="note">
                  {note.split("\n").map((line, index) => (
                    <p key={index}>{line}</p>
                  ))}
                </div>
              )}
            </td>
          );
        }
      )}
    </>
  )}
/>;

My desktop is:

• OS: Ubuntu 20.04
• Browsers: Chrome, Safari, Opera, Firefox

[petyosi]

I haven't seen this nor have received such reports before, and I can't do much, I am afraid. The component does not interfere with scroll events or velocity in any way - it just reads the values.

I've noticed that you report this from Ubuntu. Can you try another OS/device? Perhaps there's something specific to your setup.

I will reopen the issue once there's something actionable.

[lispz1610]

Firstly, I thank for answer, and how about the SO's, I tested in Windows 10 too and I had the same problem. Unfortunately I don't have a macbook at hand to test in macOS.

[antonkovalevformind]

I have the same problem on macbook m1, OS: ventura 13.3 (22E252)

[petyosi]

Most likely, this is this: https://github.com/petyosi/react-virtuoso/issues/609