Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ran into the same issue recently with a SPA where the <code>&lt;body&gt;</code> rubber-banding was detracting from the experience, but I needed scrolling in sub-areas. Many thanks to dSquared's suggestions, as Method 1 worked best for me. Here is my small expansion of his suggestion that I implemented in a project for work that looks all the way up the tree to find any elements (not just divs) that have a <code>.scroll</code> class on it: </p> <pre><code>// Prevent rubber-banding of the body, but allow for scrolling elements $('body').on('touchmove', function (e) { var searchTerms = '.scroll, .scroll-y, .scroll-x', $target = $(e.target), parents = $target.parents(searchTerms); if (parents.length || $target.hasClass(searchTerms)) { // ignore as we want the scroll to happen // (This is where we may need to check if at limit) } else { e.preventDefault(); } }); </code></pre> <p>And here is what the CSS looks like: </p> <pre><code>body { height: 100%; overflow: hidden; } .scroll, .scroll-y, .scroll-x { -webkit-overflow-scrolling: touch; } .scroll &gt; *, .scroll-y &gt; *, .scroll-x &gt; * { -webkit-transform : translateZ(0); } .scroll { overflow: auto; } .scroll-y { overflow-y: auto; } .scroll-x { overflow-x: auto; } </code></pre> <p>You only need one library (jQuery or <a href="http://zeptojs.com/" rel="noreferrer">Zepto</a>) and you get native scrolling with momentum and no rubber-banding on the body. Also, I've added the translateZ to fix some issues I've had with elements disappearing during scrolling and it can be used to <a href="http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/" rel="noreferrer">GPU accelerate your elements</a>. </p> <p>BUT (and this is a big but), as dSquared points out, the whole page rubber-bands when the scroll element is at its limit and attempted to scroll further. Personally, I consider this a failure so I'm continuing to work on it, just wanted to pitch in on trying to figure this out. Adding a check along the lines of the OP's code might be the answer, but I haven't tried it.</p> <p>UPDATE (10/7/12):</p> <p>After lots of work, I've gotten the following code working perfectly in iOS6 (haven't tested in anything else). No rubber-banding on the body, no more issues when at the limit of the scroll area, and it has native scrolling performance throughout. It's obviously a lot more code that originally, but I think this will give the behavior closest to the OP's goals. </p> <pre><code>(function registerScrolling($) { var prevTouchPosition = {}, scrollYClass = 'scroll-y', scrollXClass = 'scroll-x', searchTerms = '.' + scrollYClass + ', .' + scrollXClass; $('body').on('touchstart', function (e) { var $scroll = $(e.target).closest(searchTerms), targetTouch = e.originalEvent.targetTouches[0]; // Store previous touch position if within a scroll element prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {}; }); $('body').on('touchmove', function (e) { var $scroll = $(e.target).closest(searchTerms), targetTouch = e.originalEvent.targetTouches[0]; if (prevTouchPosition &amp;&amp; $scroll.length) { // Set move helper and update previous touch position var move = { x: targetTouch.pageX - prevTouchPosition.x, y: targetTouch.pageY - prevTouchPosition.y }; prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY }; // Check for scroll-y or scroll-x classes if ($scroll.hasClass(scrollYClass)) { var scrollHeight = $scroll[0].scrollHeight, outerHeight = $scroll.outerHeight(), atUpperLimit = ($scroll.scrollTop() === 0), atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight); if (scrollHeight &gt; outerHeight) { // If at either limit move 1px away to allow normal scroll behavior on future moves, // but stop propagation on this move to remove limit behavior bubbling up to body if (move.y &gt; 0 &amp;&amp; atUpperLimit) { $scroll.scrollTop(1); e.stopPropagation(); } else if (move.y &lt; 0 &amp;&amp; atLowerLimit) { $scroll.scrollTop($scroll.scrollTop() - 1); e.stopPropagation(); } // If only moving right or left, prevent bad scroll. if(Math.abs(move.x) &gt; 0 &amp;&amp; Math.abs(move.y) &lt; 3){ e.preventDefault() } // Normal scrolling behavior passes through } else { // No scrolling / adjustment when there is nothing to scroll e.preventDefault(); } } else if ($scroll.hasClass(scrollXClass)) { var scrollWidth = $scroll[0].scrollWidth, outerWidth = $scroll.outerWidth(), atLeftLimit = $scroll.scrollLeft() === 0, atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth; if (scrollWidth &gt; outerWidth) { if (move.x &gt; 0 &amp;&amp; atLeftLimit) { $scroll.scrollLeft(1); e.stopPropagation(); } else if (move.x &lt; 0 &amp;&amp; atRightLimit) { $scroll.scrollLeft($scroll.scrollLeft() - 1); e.stopPropagation(); } // If only moving up or down, prevent bad scroll. if(Math.abs(move.y) &gt; 0 &amp;&amp; Math.abs(move.x) &lt; 3){ e.preventDefault(); } // Normal scrolling behavior passes through } else { // No scrolling / adjustment when there is nothing to scroll e.preventDefault(); } } } else { // Prevent scrolling on non-scrolling elements e.preventDefault(); } }); })(jQuery); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to disable rubber band in iOS web apps?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. UStrgraglia
    1. USTim Hall
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUndeletion
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI probably spent about two months on this problem but went a totally bad route. YTMND.
      singulars
      1. PO
      1. USRandallB
    2. COWait! I spoke too soon. If you try to drag your finger upward on a scroll-x element, it'll still rubberband sadly. :(
      singulars
      1. PO
      1. USRandallB
    3. COSubmitted an edit. Feel free to try it.
      singulars
      1. PO
      1. USRandallB
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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