Enable scroll for Readonly DIV over another div

Question

I have a DIV with some content which needs to be in Read-only mode, so i have overlapped it with another DIV and set cursor:no-drop.

This works well and make my content read-only, But it also doesn't let the user scroll over the content DIV.

How can i keep my content DIV scroll-able.

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

Please add your code into snippet, So someone has quickly fixed your issue. Thanks — jaydeep patel, Aug 29 '18 at 10:56
The div content is “read-only” by default (as is most content in HTML, unless you specifically implement it otherwise), you don’t need to put another element on top of it for _that_. So please explain what you _actually_ need/ want - “read-only” isn’t it. — misorude, Aug 29 '18 at 11:17
@misorude i have some Plug-ins attached with the DIV content, which makes its text clickable, so i am making it read-only to dis-allow that. But i still want user to be able to read all the content. — Crazy Dev, Aug 29 '18 at 11:24
Well that is something you should mention up-front. But why do you apply plugin functionality that makes something edit-able in the first place, if that’s not what you want? Is there no way to fix this on the plugin level (configuration/settings) maybe? — misorude, Aug 29 '18 at 11:30
Yes that's the functionality, and in preview mode i need to dis-allow clicks on content but nothing is there at the plug-in level — Crazy Dev, Aug 29 '18 at 11:42

Mahdi Aslami Khavari · Answer 1 · 2018-08-29T11:32:23.797

0

but you need use height and width for better result

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

edited Aug 29 '18 at 11:32

answered Aug 29 '18 at 11:08

Mahdi Aslami Khavari

1,755
15
23

Please see the updated Code snippet to see exact issue – Crazy Dev Aug 29 '18 at 11:12
i suggest to use unselect but if you want to use this way its your code – Mahdi Aslami Khavari Aug 29 '18 at 11:35

score 0 · Answer 2 · answered Aug 29 '18 at 11:30

No need to overlap with another , just add some CSS and make this undetectable :

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

Enable scroll for Readonly DIV over another div

2 Answers2