How to hide scrollbars until they are needed, then delete if not needed

I have an example here .

Basically, I have a scrollbar that is always present, even if it is not currently needed. Problem: I want the scroll bar to appear if my div is over 300 pixels tall.

<fieldset id="typography"> <ul> <li><label for="Poll Question">Header</label></li> <li><input type="text" id="formheader" value="Header"></input></li> <div class="scroll"> <li><label>Answers</label></li> <li id="formanswer1" class="clonedInput"><input type="text" id="formanswer1" value="" /></li> <li id="formanswer2" class="clonedInput"><input type="text" id="formanswer2" value="" /></li> <li id="formanswer3" class="clonedInput"><input type="text" id="formanswer3" value="" /></li> </div> <li><input type="button" id="btnAdd" value="Add Answer" /> <input type="button" id="btnDel" value="Remove Answer" /></li> </ul> 

I would advise any help. I know that I need to use JS, but I don’t even know where to start.

Question 2: Is there a simple command that I can use, when I click the add button, it scrolls to the very bottom of the scroller?

+6
source share
2 answers

In your CSS, just set height , not max-height and set overflow : auto , as this update is for your demo: http://jsfiddle.net/nnnnnn/83659/4/

 div.scroll { background-color:#00FFFF; width:190px; height:90px; overflow:auto; } 

Question 2: if you call .focus() on your newly added input, it should bring it into view and place the cursor in the field: http://jsfiddle.net/nnnnnn/83659/4/

Alternatively, you can use the .scrollIntoView() function to scroll the element in the view without giving it focus.

+15
source

Just add fixed height and overflow: auto :

 .scroll { background-color: #00FFFF; width: 190px; height: 100px; overflow: auto; } 

Check out http://jsfiddle.net/83659/2/

+5
source

Source: https://habr.com/ru/post/908759/


All Articles