Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThe size is not predictable as the child can resize. I can enlarge things enough in anticipation of scrolling that may occur, but ideally that's not what I want to have. And that is how I have been doing it so far. What kind of compatibility issues would arise from scrolling something, especially on a mobile device? I thought standards were designed to prevent these inconsistencies. Can you give specific examples?
      singulars
    2. COWell a left/right arrow key press will obviously not work with a mobile device. You cannot always assume javascript will be run for a user (disabled, old IE, etc), but if that doesn't matter to you then by all means use it. Example: Usability would likely suffer from a javascript-operated scroll rather than a normal, smooth scroll in mobile safari. If the child can resize, couldn't you have a consistent wrapper class for scrolling? I guess I don't see why you'd need to resize through javascript when you can keep the div's size consistent with the wrapper or autosize by default.
      singulars
    3. COI have a page where clicking on one the child elements of the 'container' div causes the entire contents of the container to be moved such that the clicked element is moved to the top left corner of the container. I cannot predict how right-adjusted a given node might end up being, and it appears impossible to scroll if there isn't a scroll-bar even when forcing it from js (correct me if i'm wrong). I can either enlarge the child container enough for any horizontal scrolling that may need to occur, or otherwise the javascript has to resize dynamically before it can scroll anywhere
      singulars
 

Querying!

 
Guidance

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