DEV Community

Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on

5 3

JS: "CTR + Wheel" Event

This short read is for those who are searching how to get event for CTR + MOUSEWHEEL event.

Here is a sample. Lets say we are trying to change to font size of our text if we CTR + WHEEL.



/**
You can change the window to element you want this event to happen.
example: document.getElementById("view-chapter-verse").addEventListener()
*/
window.addEventListener("wheel", function (event) {
        event.preventDefault(); // this will prevent the scaling for browsers.
        if (event.ctrlKey) { // check if we are pressing the CTR key
            if (event.deltaY) {
                // Do what you want here. In this example
                // Im trying to change the Font Size of my article
                // event.deltaY is less than 0 it means we are scrolling up. If not scrolling down.
                fontSize = event.deltaY < 0 ? fontSize.value + 0.5 : fontSize.value - 0.5;
            }
        }
});

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs