Включить прокрутку для Readonly DIV поверх другого div - PullRequest
Новая
       10

Включить прокрутку для Readonly DIV поверх другого div

0 голосов
/ 29 августа 2018

У меня есть DIV с некоторым содержимым, которое должно быть в режиме «Только чтение», поэтому я наложил его на другой DIV и установил курсор: 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>

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Нет необходимости накладываться друг на друга, просто добавьте немного 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>
0 голосов
/ 29 августа 2018

но вам нужно использовать высоту и ширину для лучшего результата 

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