Search code examples
htmlcsspointer-events

pointer events on click but not on scroll


Is it possible to allow click but not scroll events?

pointer-events: none;

Will disable both types of inputs, I would like to disable only scroll. Any other ideas for workarounds?


Solution

  • Do it with javascript:

    function noScroll(event) {
        event = event || window.event;
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.returnValue = false;
        return false;
    }
    
    // disable scolling on the whole window:
    if (!window.addEventListener) {
        // old IE only
        window.attachEvent("onscroll", noScroll);
    } else {
        // Firefox only
        window.addEventListener("DOMMouseScroll", noScroll);
        // anything else
        window.addEventListener("scroll", noScroll);
    }
    
    // disable scrolling on a single element:
    var el = document.getElementById("elementID");
    
    if (!el.addEventListener) {
        el.attachEvent("onscroll", noScroll);
    } else {
        el.addEventListener("DOMMouseScroll", noScroll);
        el.addEventListener("scroll", noScroll);
    }
    

    That should do the trick.