8

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?

melpomene
  • 84,125
  • 8
  • 85
  • 148
edencorbin
  • 2,569
  • 5
  • 29
  • 44

2 Answers2

1

Add this css:

.stopScroll{
height:100%;
overflow:hidden;
}

Then in jQuery:

$('body').addClass('stopScroll');

Look at the fiddle:https://jsfiddle.net/26dct8o3/1/

Would help if you are looking for this. Otherwise let me know in comments if this is not what you want.

Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64
  • rating up, as I think it is a correct answer to the question, however, I'm having an issue where the element I want to to do this on is an iframe (google maps actually). pointer-events: none prevents scroll overflow: hidden doesn't seem to effect it. Any ideas on this scenario? – edencorbin Oct 17 '16 at 17:05
  • The fiddle scrolls on the map, the intent is that it does not scroll in the map, but rather over the page, but does register clicks in the map. – edencorbin Oct 17 '16 at 19:16
0

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.

Aloso
  • 5,123
  • 4
  • 24
  • 41
  • 1
    I need normal scrolling on the window and no scrolling on just the google element. I'm thinking my question was too brief, going to upvote this too, maybe select one of these answers. – edencorbin Oct 17 '16 at 17:46
  • You can use this techique for single elements, too. I'll update my answer to meet your needs. I should also mention that it's not possible to disable scrolling in iframes. – Aloso Oct 17 '16 at 17:49
  • okay I'll accept this answer, you can disable scrolling via a parent pointer-events: none but that will also disable click, which was may original issue. Thanks for the help. – edencorbin Oct 17 '16 at 21:15