Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Fast Scrolling #562

Closed
lispz1610 opened this issue Feb 8, 2022 · 4 comments
Closed

[BUG] Fast Scrolling #562

lispz1610 opened this issue Feb 8, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@lispz1610
Copy link

lispz1610 commented Feb 8, 2022

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

react-virtuoso bug

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
@lispz1610 lispz1610 added the bug Something isn't working label Feb 8, 2022
@petyosi
Copy link
Owner

petyosi commented Feb 9, 2022

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.

@petyosi petyosi closed this as completed Feb 9, 2022
@lispz1610
Copy link
Author

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
Copy link

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

@petyosi
Copy link
Owner

petyosi commented Jun 5, 2023

Most likely, this is this: #609

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants