StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You probably know that the style <code>overflow: scroll</code> will make scroll bars show up regardless of child size. Do you actually need Javascript to boost the child dimensions, rather than having an extra wrapper div with greater dimensions that would cause the scroll like in <a href="http://jsfiddle.net/gFTeG/10/" rel="nofollow"><strong>this demo</strong></a>? I know Safari already scrolls approximately 20px on arrow key down within selected scroll divs by default, and I would assume other browsers have this functionality as well.</p> <p>If you do have need for increasing the div size with javascript, jQuery has a few functions that would be helpful. The <a href="http://api.jquery.com/keydown/" rel="nofollow">.keydown() method</a> looking for left and right arrow keys (which I believe are key codes 37 and 39 respectively) and the <a href="http://api.jquery.com/animate/" rel="nofollow">.animate()</a> or some other <a href="http://api.jquery.com/category/css/" rel="nofollow">CSS method</a> would work to resize the div chained together. </p> <p>The <a href="http://api.jquery.com/scroll/" rel="nofollow">.scroll() method</a> could come in useful as well. You could chain the resize code to the scroll method with an <code>overflow: scroll</code> property already applied. I would test to see if browsers will trigger the .scroll method even if the scroll bars are empty. If not, you could potentially make the child only 1px wider/taller then the parent div and then rely on the jQuery to further resize on the user's scroll. </p> <p>Broadly speaking, I would advise against the javascript/jQuery resize and scroll. Compatibility with different browsers, especially mobile browsers, would be inconsistent or unusable. I don't know exactly what your needs are, but if it can be accomplished with only HTML/CSS it would be much cleaner and more compatible. I would reserve the javascript for cases where usability will not be lost if it does not run.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload