Question

我有这个HTML代码：

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            reference: 'HelloPanel',
            width: 200,
            html: '<input type="text">',
            renderTo: Ext.getBody()
        });

        Ext.create('Ext.panel.Panel', {
            title: 'Hello2',
            reference: 'fooGrid',
            width: 200,
            html: '<input type="text">',
            renderTo: Ext.getBody(),
            listeners: {
                click: {
                    element: 'el', 
                    fn: function() {
                        alert('Show data from HelloPanel1');
                    }
                }
            }


        });

    }
});

具有以下属性：

<div class="parentDisable"></div>
<div id="popup">
    <div class="karmalayer">
        <img src="<?php echo(IMG) ?>alpha-shadow.png">
        Thank you for visiting
    </div>
</div>

这是在打开页面并显示弹出窗口时“禁用”我的背景。由于我的网站已经在后台加载（并且网站很长），我想禁用滚动功能。基本上，只要用户在div .karmawrapper { position: absolute; z-index: 10001; width: 100%; } .karmalayer { margin: 0 auto; display: block; background-color: #000; width: 500px; height: 300px; border: 2px solid #337ab7; color: #fff; padding: 20px; font-size: 18px; } .hlcolor { color: #337ab7; } .karmalayer img { margin: 0 auto; display: block; } .parentDisable{ position:fixed; top:0; left:0; background:#000; opacity:0.8; z-index:10000; height:100%; width:100%; } #popup{ position: absolute; z-index:10001; width: 100%; display: none; text-align: center; }中，就不应该允许滚动。

我试图用jQuery来解决它，但这并不能解决问题：

popup

有什么想法吗？

Answer 1

对于不可滚动的内容，将其包装在容器中并将其溢出设置为隐藏。容器需要一个固定的高度，因此将位置设置为绝对和高度/宽度为100％应该填满屏幕通常期望页面内容的方式。这将阻止滚动条出现并阻止默认滚轮操作。在显示内容之前检查页面的加载时间。

另外，如果您的网页内容太多，或者将其分成多个页面就足够了？或者，仅当用户滚动到内容时才按ajax加载内容。

CSS / jQuery阻止滚动某些Div

1 个答案: