Question

我有一个DIV，其中某些内容需要处于只读模式，因此我已将其与另一个DIV重叠并设置了cursor：no-drop。

这很好，并且使我的内容变为只读，但是它也不允许用户在内容DIV上滚动。

我如何保持内容DIV可滚动。

.roDiv {
        position: absolute;
        height: 100%;
        width: 100%;
        cursor: no-drop;
        z-index: 1000;
    }

<div class="roDiv"></div>
<div id="content" style="overflow-y:scroll; height:90px;">Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>and this division should be scrollable<br/> as the content can be longer</div>

Answer 1

但是您需要使用高度和宽度以获得更好的效果

.roDiv {
    top: 0px;
    left: 0px;
    position: absolute;
    height: 100vh;
    width: inherit;
    cursor: no-drop;
    z-index: 1000;
    background-color: grey;
}

#content {
overflow-y: scroll;
height: 90px;
width: 100%;
overflow-x: hidden;
position: relative;
}

<div id="content" style="overflow-y:scroll; height:90px;">Content goes here, <br/>
<div class="roDiv"></div>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>and this division should be scrollable<br/> as the content can be longer</div>

Answer 2

无需彼此重叠，只需添加一些CSS并使其不可检测：

#content {
    cursor: no-drop;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

<div id="content" style="overflow-y:scroll; height:90px;" >Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>
Content goes here, <br/>and this division should be scrollable<br/> as the content can be longer</div>

为另一个DIV上的只读DIV启用滚动功能

2 个答案: