disabilitando lo scorrimento rimbalzante solo per html ma mantenendo gli elementi con overflow: scroll

Question

Sto creando un'applicazione web a schermo intero che avrà alcuni moduli/widget che fanno uso del nuovo overflow di iOS 5: funzioni di scorrimento. Quello che voglio è disabilitare l'effetto "rimbalzante" quando si scorre html/body (dato che è a schermo intero) ma mantenere questo effetto solo sugli elementi scorrevoli.

per attenuare gli effetti di elementi scorrevoli che ho:

html, body { overflow: hidden; } 

.scrollable { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

e quindi il seguente script che disabilita l'effetto tocco di scorrimento:

$(document).bind('touchmove', function (e) { 
    if (e.target === document.documentElement) { 
     e.preventDefault(); 
    } 
}); 

anche se questo non sembra funzionare affatto , perché quando si scorre un elemento in fondo o in alto si scorre anche il documentElement.

C'è un modo per disabilitare solo quell'effetto per l'elemento html del corpo?

Qui si tratta di un buon esempio di come questo influisce sulla funzionalità:

http://dl.dropbox.com/u/1928164/ios5/index.html

Answer 1

Si scopre per me che l'unica soluzione efficace è stato quello di utilizzare joelambert/ScrollFix sceneggiatura, ha funzionato davvero bene senza ritardi, infatti lo sto già utilizzando in uno dei miei progetti.

È inoltre possibile controllare su di esso in ulteriori dettagli su his blog post. Ci scusiamo per gli altri utenti che hanno risposto, ma davvero non ho trovato quelle risposte per me.

Answer 2

E 'un peccato che -webkit-overflow-scrolling non gestisce questo meglio. È necessario tenere traccia della posizione per farlo funzionare. Metto la classe scroll su tutto ciò che voglio scorrere sulla mia pagina, come ad esempio gli elementi <ul>. Avvolgi uno <div> intorno allo <ul> che riempie il viewport con overflow-y: auto. Non inserire overflow o height su <ul>. Lo <ul> si espanderà tanto quanto il suo contenuto ed è lo <div> che sta effettivamente facendo lo scrolling. -webkit-overflow-scrolling è ereditato, quindi mettilo fino al DOM che desideri.

Demo: http://jsfiddle.net/ThinkingStiff/FDqH7/

Script:

var swipeY = 0; 

function onTouchMove(event) { 

    var scroll = event.target.closestByClassName('scroll'); 

    if (scroll) { 

     var top = scroll.positionTop - scroll.parentNode.positionTop, 
      heightDifference = (0 - scroll.offsetHeight + scroll.parentNode.offsetHeight); 

     if((top >= 0) && (event.touches[0].screenY > swipeY)) { 
      event.preventDefault(); //at top, swiping down 
     } else if((top <= heightDifference) && (event.touches[0].screenY < swipeY)) { 
      event.preventDefault(); //at bottom, swiping up 
     }; 

    } else { 
     event.preventDefault(); 
    }; 

}; 

function onTouchStart(event) { 

    swipeY = event.touches[0].screenY; 

}; 

Element.prototype.closestByClassName = function (className) { 

    return this.className && this.className.split(' ').indexOf(className) > -1 
     ? this 
     : (this.parentNode.closestByClassName && this.parentNode.closestByClassName(className)); 

}; 

window.Object.defineProperty(Element.prototype, 'positionTop', { 

    get: function() { 
     return this.offsetTop - this.parentNode.scrollTop; 
    } 

}); 

document.getElementById('viewport').addEventListener('touchmove', onTouchMove, false); 
document.getElementById('viewport').addEventListener('touchstart', onTouchStart, false); 

HTML:

<div id="viewport"> 
<div id="scroll-view"> 
    <ul class="scroll"> 
     <li>scroll scroll scroll scroll scroll </li> 
     <li>scroll scroll scroll scroll scroll </li> 
     <li>scroll scroll scroll scroll scroll </li> 

     . . . 

    </ul> 
</div> 
</div> 

CSS:

#viewport { 
    border: 1px solid black; 
    height: 460px; 
    width: 320px; 
    -webkit-overflow-scrolling: touch; 
} 

#scroll-view { 
    height: 100%; 
    overflow-y: auto; 
    width: 100%; 
} 

Answer 3

Ecco una risposta simile a ThinkingStiff di, se non che non impone la tua struttura html. Cerca eventuali elementi che hanno overflow del contenuto e consente lo scorrimento solo quando l'utente sta interagendo con loro.

Inconvenienti:

• Una volta che l'utente preme il limite superiore o inferiore del nodo scorrevole, rimbalzando all'interno di quel nodo non si verificherà (ma sarà se flick da sotto/sopra i limiti). Probabilmente ciò significa che non soddisfa i requisiti per pull to refresh :(

• C'è una differenza 2px dispari che ho notato nei miei casi di test durante il calcolo delle scroll scroll.Non so dove che è venuto da, e potrebbe essere necessario modificare il valore

CoffeeScript:

# Vertical scrolling behavior overrides. 
# 
# This disables vertical scrolling on the page for touch devices, unless the user is scrolling 
# within an overflowed node. This requires some finessing of the touch events. 
# 
# **NOTE:** This code ends up disabling bounce behavior if the user tries to scroll on a node that 
# is already at its upper or lower limit. 
window$ = $(window) 
initialY = null 
nodeStack = [] 

# When a user begins a (potential) drag, we jot down positional and node information. 
# 
# The assumption is that page content isn't going to move for the duration of the drag, and that 
# it would also be awkward if the drag were to change/stop part way through due to DOM 
# modifications. 
window$.bind 'touchstart', (evt) -> 
    initialY = evt.originalEvent.pageY 
    nodeStack = $(evt.target).parents().andSelf().filter(':not(body, html)').get().reverse() 
    nodeStack = nodeStack.map (node) -> $(node) 

window$.bind 'touchend touchcancel', (evt) -> 
    initialY = null 
    nodeStack = [] 

# We override the `touchmove` event so that we only allow scrolls in allowable directions, 
# depending on where the user first began the drag. 
window$.bind 'touchmove', (evt) -> 
    return evt.preventDefault() if initialY == null 
    # A positive direction indicates that the user is dragging their finger down, thus wanting the 
    # content to scroll up. 
    direction = evt.originalEvent.pageY - initialY 

    for node$ in nodeStack 
    nodeHeight = node$.height() 
    # For some reason, the node's scrollHeight is off by 2 pixels in all cases. This may require 
    # tweaking depending on your DOM. Concerning. 
    scrollHeight = node$[0].scrollHeight - 2 
    nodeScrollTop = node$.scrollTop() 

    # If we have a scrollable element, we want to only allow drags under certain circumstances: 
    if scrollHeight > nodeHeight 
     # * The user is dragging the content up, and the element is already scrolled down a bit. 
     return if direction > 0 and nodeScrollTop > 0 
     # * And the reverse: the user is dragging the content down, and the element is up a bit. 
     return if direction < 0 and nodeScrollTop < scrollHeight - nodeHeight 

    # Otherwise, the default behavior is to disable dragging. 
    evt.preventDefault()