html - 在另一个 div 上启用 Readonly DIV 的滚动

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

无需与另一个重叠，只需添加一些 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>