schovi / react-iscroll

React component for wrapping iScroll http://iscrolljs.com/
MIT License
236 stars 60 forks source link

Not working on surface and large touch displays? #60

Closed edencorbin closed 7 years ago

edencorbin commented 7 years ago

This has been, and does work great for me on all my mouse based testing, but testing on a microsoft surface touchscreen, and a large touchscreen display it only scrolls little bits, requiring lots of tiny choppy flicks to move at all, and generally is unacceptably buggy, am I missing something? I have also tried with var iScroll = require('iscroll/build/iscroll-probe') and the other versions.

import React, { Component } from 'react';
import ReactIScroll from 'react-iscroll';
import iScroll from 'iscroll';

class TestMin1 extends Component {

  random_text() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 10; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));

    return (<div>{text}</div>)
  }

  render() {
    return (
      <div style={{ width: 800, height: 500, backgroundColor: 'blue' }}>

        <ReactIScroll iScroll={iScroll}
          options={{
            scrollX: false,
            scrollY: true,
            probeType: 2,
          }}
        >
          <div>
            {this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}{this.random_text()}
          </div>
        </ReactIScroll>
      </div>

    )
  }
}

export default TestMin1
edencorbin commented 7 years ago

Oh I seem to be getting better results with disableTouch: false, disablePointer: true, disableMouse: true

Investigating how this works across different implementations.

edencorbin commented 7 years ago

Okay narrowed it down to just one setting: disablePointer: true,

This retains the mouse functionality and the touchscreen input, and no longer glitches on surface/touchscreen. Closing out the ticket, perhaps this is helpful to someone.

schovi commented 7 years ago

@edencorbin Would be awesome if you can make FAQ to README. Didn't know that and can't test that.