时间戳

首页 > 解决方案 > 在另一个 div 上启用 Readonly DIV 的滚动

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

问题描述

我有一个包含一些内容的 DIV，需要处于只读模式，所以我将它与另一个 DIV 重叠并设置光标：无拖放。

这很好用，使我的内容只读，但它也不允许用户滚动内容 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>

标签： htmlcssdivisionreadonly

解决方案

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

推荐阅读