Question

0

212

Views

The cursor is hidden by 'position: sticky' element

I have a div anchored to the top of the page using "position: sticky", also have a div below which is editable (contenteditable="true") and it has lots of lines.

Please see the code snippet below:

.scrollable {
  padding: 0.5em;
  box-sizing: border-box;
}

.top {
    position: sticky;
    top: 0;
    z-index: 2;
      background-color: yellow;
}

<html>
<body>

<div class="top">
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
    sticky line<br/>
</div>

<div contenteditable="true" class="scrollable" data-placeholder="Click here to type">
the first line<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
f<br/>dfsd<br/>
ds<br/>
fsd<br/>
f<br/>
dfsd<br/>
ds<br/>
fsd<br/>
the last line<br/>
</div>

If I use arrow Down in keyboard to move cursor to the very bottom, then use arrow UP in keyboard to move the cursor all the way up, the cursor will eventually move into the top div area and thus be hidden, making typing invisible.

What I want to achieve is:

When the cursor reach the top border of lower div, instead of moving cursor into the top div, can we scroll the content to show the lines above?
The scroll bar has to apply to the whole page, just as what it is now.

about 4 years ago · Juan Pablo Isaza

Answer question

0

212

The cursor is hidden by 'position: sticky' element

Find remote jobs

Andres GPT