【问题标题】:pointer events on click but not on scroll单击而不是滚动时的指针事件
【发布时间】:2016-10-17 16:23:56
【问题描述】:

是否可以允许点击但不允许滚动事件?

pointer-events: none;

将禁用这两种类型的输入,我想只禁用滚动。还有其他解决方法的想法吗?

【问题讨论】:

    标签: html css pointer-events


    【解决方案1】:

    添加这个css:

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

    然后在 jQuery 中:

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

    看小提琴:https://jsfiddle.net/26dct8o3/1/

    如果您正在寻找这个,会有所帮助。否则,如果这不是您想要的,请在 cmets 中告诉我。

    【讨论】:

    • 评价,因为我认为这是对这个问题的正确答案,但是,我遇到了一个问题,我想要执行此操作的元素是 iframe(实际上是谷歌地图)。 pointer-events: none 防止滚动溢出: hidden 似乎没有影响。对这种情况有什么想法吗?
    • 小提琴在地图上滚动,意图是它不在地图中滚动,而是在页面上滚动,但在地图中记录点击。
    【解决方案2】:

    用 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);
    }
    

    这应该可以解决问题。

    【讨论】:

    • 我需要在窗口上正常滚动,而不是只在 google 元素上滚动。我认为我的问题太简短了,我也要对此表示赞同,也许选择其中一个答案。
    • 您也可以将此技术用于单个元素。我会更新我的答案以满足您的需求。我还应该提到,在 iframe 中禁用滚动是不可能的。
    • 好的,我会接受这个答案,您可以通过父指针事件禁用滚动:无,但这也会禁用点击,这可能是原始问题。感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 2021-05-06
    • 2017-05-26
    • 1970-01-01
    • 1970-01-01
    • 2015-01-20
    • 2019-09-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多