启用只读 DIV 滚动到另一个 div答案

【问题标题】：Enable scroll for Readonly DIV over another div启用只读 DIV 滚动到另一个 div
【发布时间】：2018-08-29 10:55:18
【问题描述】：

我有一个 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>

【问题讨论】：

请将您的代码添加到sn-p中，所以有人很快解决了您的问题。谢谢
div 的内容默认是“只读的”（HTML 中的大多数内容也是如此，除非你特别实现它），你不需要在它上面放置另一个元素那个。所以请解释一下你实际上需要/想要什么 - “只读”不是吗。
@misorude 我在 DIV 内容中附加了一些插件，这使得它的文本可点击，所以我将其设为只读以禁止它。但我仍然希望用户能够阅读所有内容。
嗯，这是你应该提前提到的。但是，如果这不是您想要的，为什么您首先要应用使某些内容可编辑的插件功能？有没有办法在插件级别（配置/设置）解决这个问题？
是的，这就是功能，在预览模式下我需要禁止点击内容，但插件级别没有任何内容

标签： html css division readonly

【解决方案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>

【讨论】：

【解决方案2】：

但你需要使用高度和宽度以获得更好的结果

.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>

【讨论】：

请查看更新的代码 sn-p 以查看确切问题
我建议使用取消选择，但如果你想这样使用它的代码