内容分层和禁用在具有低优先级z-index的层上滚动

Question

我正在使用HTML5，CSS3和JqueryMobile开发移动应用程序，这需要在点击提交按钮后立即阻止所有事件的屏幕。

我身体里有2个div如下：

<div data-role=page id=p1>
    content of the page goes here  
</div>

<div id=inputBlocker>&nbsp;</div>

当在页面p1上单击提交按钮时，此输入阻止程序将添加到正文中。

inputBlocker的CSS如下：

#inputBlocker {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999999;
}

此解决方案可帮助我在单击提交按钮时阻止任何输入事件。 但问题是如果页面p1有更多内容不适合屏幕，它会滚动。现在，当用户点击提交按钮时，输入阻止程序禁用页面p1，但用户仍然可以滚动页面p1。是否有可能停止此滚动效果？

Answer 1

我看到你有一个创造性的解决方案，把一些东西放在前面，因此阻止所有输入......

考虑这个更内置的解决方案：

pointer-events="none"

作为HTML div的属性，或者作为html或body标签本身的属性。您可以使用javascript启用它。我很确定你也可以将它用作CSS属性。