0
164
ViewsHandle editable element behind another element
I am working on a project where it implements an email editor, something like Gmail editor. It has "Recipients and Subject" always on top and the scrollable editor area below it. So, what I want to achieve is:
- Let the top part always stay on top at fixed position, even we are scrolling the editor content below
- If the content in the editor is too long, scrolling the page down should move the top content behind the top part. At this point, if we keep pressing "Up" key, it should bring the top hidden content back, instead of moving the cursor up.
I have the gif below to explain it better hopefully:
I am able to achieve the first one by using sticky property, but I cannot do the 2nd one. If I type long content inside the editor area, make it partially hidden by the top part, then if I keep pressing "up", it will eventually move the cursor into the top area, thus hiding the cursor, and I am unable to bring the top hidden content back using "Up" key.
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}<html>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<div contenteditable="true">
</div>
</html>1 answers
Answer question0
Utilizing the sticky div as a container for text might help, I also wrote a small helper function for breaks to test the scrolling feature:
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}<div class="sticky">
<input placeholder="Recipients">
<br>
<input placeholder="Subject">
</div>
<div contenteditable="true">
<script>
for(var x=0;x<=100;x++){
document.write("<br>") }
</script>
<h1>test</h1>
</html>