CODEWITHSUNDEEP
htmlcsspositiontextareacss-position
Swiss Mister
Swiss Mister

Reputation: 3414

scroll to top in textarea below fixed div

Situation:

  1. There is a textarea that is taller than the browser window (and full of text).
  2. There is a position:fixed; bar at the top.
  3. When the text in the textarea is edited and scrolled down and the user scrolls back to the top of the textarea with the cursor keys, the top of the text area stays hidden behind the "bar at the top".

Question: How can the layout be changed (HTML, CSS) so that the first lines of the textarea become visible through keystrokes inside the text area?

I have tried:

To be clear: some of these measures help that the whole text area becomes visible when the mouse is used to scroll to the top. The textarea should be accessible fully through the cursor keys on the keyboard.

Demo: jsfiddle

Upvotes: 0

Views: 1280

Answers (2)

waterplea
waterplea

Reputation: 3661

You could probably do something like this: https://jsfiddle.net/dxg4anaf/4/

.text {
    border-top: 18px solid transparent;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

Making scrollable just the div with textarea, not the container of both that div and the top div. The padding between textarea and its top would still not be visible when you scroll with keyboard, but at least all of the textarea will.

Can't think of a better way.

Upvotes: 2

Girdhar Singh Rathore
Girdhar Singh Rathore

Reputation: 5615

add default rows and cols size

<textarea rows="20" cols="50"> first line .. .. </textarea>

and remove height:10000px; in css of textarea

textarea {
   margin-top:30px;
   height:10000px;
}

css should be like 

textarea { margin-top:30px;}

Upvotes: 0

Related Questions