Skip to content

Shift + mouse wheel does not scroll horizontally #239

Description

@CarlossShi

What OS?

  • Windows WSL

Description

The extension currently handles Ctrl + mouse wheel, but not Shift + mouse wheel, which appears to rely on the browser's default behavior:

function handleWheel(e: WheelEvent) {
if (!e.ctrlKey) return
e.preventDefault()
e.stopPropagation()
if (e.deltaY > 0) {
decTableContentZoom()
} else {
incTableContentZoom()
}
}

As a result, in some environments, Shift + mouse wheel scrolls vertically instead of horizontally in the CSV editor.

This appears to be related to previous reports: #23, #186.

Expected behavior

Holding Shift while using the mouse wheel should scroll the table horizontally.

Steps to reproduce

  1. Open a wide CSV file with Edit CSV.
  2. Hover over the table.
  3. Hold Shift and use the mouse wheel.
  4. The table scrolls vertically instead of horizontally.

Suggested fix

For WSL, navigate to ~/.vscode-server/extensions/janisdd.vscode-edit-csv-0.11.9/csvEditorHtml/out/main.js, modify function handleWheel and document.documentElement.addEventListener to:

    function handleWheel(e) {
        if (e.ctrlKey) {
            e.preventDefault();
            e.stopImmediatePropagation();

            if (e.deltaY > 0) {
                decTableContentZoom();
            } else {
                incTableContentZoom();
            }
            return;
        }

        if (!e.shiftKey) {
            return;
        }

        const holder = document.querySelector(".ht_master .wtHolder");

        if (!(holder instanceof HTMLElement)) {
            return;
        }

        e.preventDefault();
        e.stopImmediatePropagation();
        holder.scrollLeft += e.deltaY;
    }

    document.documentElement.addEventListener("wheel", handleWheel, {
        passive: false,
        capture: true, // Using the capture phase together with `stopImmediatePropagation()` prevents the table's default vertical wheel handling from running.
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions