Continuous scroll for Chrome and Cordova on iOS (UIWebView)

[jiku]

PROBLEM

WHAT

Continuous scroll events aren't issued.

WHERE / WHY

Chrome, Cordova, etc still use UIWebView on iOS, while Safari, etc switched to WKWebView with iOS 8. Maybe an issue on other configurations too (Android?).

Related to #17, #19.

WebKit for developers

SOLUTIONS

Telrik Cordova plug-in to switch from UI- to WKWebView

Crosswalk instead of System WebView on Android

Use library

iScroll with ProbeType: 3 (as in ScrollMagic's advanced example).

Extract only applicable logic from library

VIRTUAL SCROLL

Timer, requestAnimationFrame...
Probe DOM. Taxing... Could poll/probe without using DOM?
Probe touch events?

New container?

Recommended seems to be checking for feature (not device), then wrap content in a container using iScroll, skrollr or (best) some.

REF

ScrollMagic

Examples

Basic
Advanced

iScroll

iScroll (Probe?) (Repo)

Maybe

https://github.com/evgenyneu/css_scroll
https://github.com/joehewitt/scrollability

Is using wrapper.onScroll less performant than window.onScroll for WK?

Use window for native scroll event, #sectionsWrapper for iScroll event

$('window').on 'scroll', (e) =>

Only make #sectionsWrapper for iScroll event

I.e. before applying iScroll, wrap <sections> with #sectionsWrapper using jQuery.

iScroll events

scrollbars: true
useTransform: false # Won't work for demo where #scroller contents need transform, but maybe for ScrollMagic controller?
useTransition: false # Implied with probeType: 3

Don't use typical CSS (overflow-y: scroll and -webkit-overflow-scrolling: touch) for #sectionsWrapper?

Global CustomEvent... (raix:event-emitter).

SiteEvent.on 'scroll', (e) =>
  @scrolling = true
  @data.env.scrollTop = e

Alternatives used in onUpdate (where it is and elsewhere... i.e. in a jiku:scroll Scroll singleton...)

# container.scrollTo 0, e # Simulate scrollTop...
# SiteEvent.emit 'scroll', @y # Use event emitter for a flexible solution with a centralized, singular (singleton) jiku.Scroll object.
# GlobalScrollTop = -> e # Global var to hold position
# jiku.Scroll.position = -> e # Same idea as, but in the jiku.Scroll namespace.
# @position e # Set position of jiku.Scroll singleton... Before doing _something_ with it...
# @data.env.scrollTop = e.originalEvent.touches[0].pageY # Use touches...
# @data.env.scrollTop = e # As passed event (if static, i.e. if set)...
# @data.env.scrollTop = -> e # As method returning passed event (if dynamic, i.e. has to get)...

Bypass native scroll on mobile... (to emulate with virtual scroll that actually issues continuous scroll events)

container.addEventListener 'touchmove', ((e) ->
e.preventDefault()
), false

$(#{container}).on 'touchstart/stop', (e) => # Could be used to start/stop RAF

'gesturechange' instead of 'touchmove'? Maybe not.

CS

<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll-probe.js"></script>

(Uses iscroll-probe.js, which is an extended version of the full library.)

controller = new ScrollMagic.Controller # document.getElementById('container') }
# controller = new ScrollMagic.Controller container: '#container'
# controller = new ScrollMagic.Controller { container: '#container', loglevel: 3 }

(Won't find anything except window unless it's actually rendered. So this would have to be in Template.body.rendered, which contains

, or after.)

Then (After making sections? While making them?)

  if Darwin.device.mobile
    myScroll = new IScroll 'window', # Maybe just window, or #container
      scrollX: false
      scrollY: true
      scrollbars: true
      useTransform: false
      useTransition: false
      probeType: 3
      click: true
    controller.scrollPos -> -myScroll.y
    myScroll.on 'scroll', -> controller.update()
    scene.addIndicators parent: '.scrollContent'

ORIGIN

$ ->
  controller = new (ScrollMagic.Controller)(container: '#example-wrapper')
  tween = TweenMax.to('#mobileadvanced', 1,
    backgroundColor: 'black'
    scale: 0.4
    borderRadius: 75)
  scene = new (ScrollMagic.Scene)(
    triggerElement: '#trigger'
    duration: 500
    offset: 75).setTween(tween).setPin('#mobileadvanced').addTo(controller)

http://iscrolljs.com/#onscroll

probeType: 3 emits the scroll event with a to-the-pixel precision. Note that the scrolling is forced to requestAnimationFrame (ie: useTransition:false).

ScrollMagic issues, could be related
1
2

iScroll probe demo
Remade in CP1
Locally @ /Volumes/Data/Dev/Studies/Libraries/iScroll/probetype3-and-flexbox
Interesting abt iScroll vs Native

ScrollMagic Docs: Container

REF

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Velocity 2014
onScroll Event issues on Modern Browsers (best article)
StackOverflow: javascript scroll event for iPhone/iPad? (basics)
StackOverflow: JQuery and touchstart, touchmove, touchend (?)
Mozilla: Window.scroll()
TipTap (not sure this is useable)
VirtualScroll.js (Seems very relevant) Also see this. This issue maybe. Then this.
WKWebView vs UIWebView iOS tester app?

iOS7 simulator in Xcode 6 (i.e. Safari before it switched from UI- to WKWebView in iOS 8).

---

iScroll on body and MouseWheel makes the listener work, etc, but it's not scrolling, etc.
https://github.com/cubiq/iscroll/blob/master/src/wheel/wheel.js