Question

In html if a child div is bigger than the parent div it will create scrollbars on the parent div if you set the appropriate style rules.

However, I want it so that when an attempt to scroll occurs (by hitting the arrow keys, making the appropriate javascript call on the element) the minimum needed expansion in size occurs on the child occurs such that it can scroll to the degree that it would have scrolled anyway if the child was already that big.

To state that again: if the child was 300px width within a parent of 200px width, and I hit right arrow key, and it scrolls 20 pixels to the right, then if the child is 200px in that same scenario, I want it to enlarge in width by 20 pixels and no more if possible, and then scroll 20 pixels to the right.

This is all assuming there is no way to make a sub-element scroll within its parents regardless of whether it’s actually larger than its parent. There might well be so I apologise in advance if i haven’t done enough research. 🙂

Answer 1

You probably know that the style overflow: scroll 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 this demo? 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.

If you do have need for increasing the div size with javascript, jQuery has a few functions that would be helpful. The .keydown() method looking for left and right arrow keys (which I believe are key codes 37 and 39 respectively) and the .animate() or some other CSS method would work to resize the div chained together.

The .scroll() method could come in useful as well. You could chain the resize code to the scroll method with an overflow: scroll 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.

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.