support indicators option?

[orlowang]

can it be possiable to supoort options.indicators? I have noticed that this repo is not update for a long time. and I was really interested in this project, I am grateful that you can have a look about this.

[schovi]

@owcc indicators are some kind of parallax thing. When you scroll main element other elements (which are indicators) will scroll too with modification of speed. As I read in documentation, you can pass elements or selectors. Element is not friendly way in React (maybe I am just oldfashioned, but refs arent good), but selectors might work. Can you try it if you have running project?

[schovi]

I am currently implementing all demos from original iscroll, then I will see all the usecases and how to deal with them.

[lemming]

Element is not friendly way in React (maybe I am just oldfashioned, but refs arent good), but selectors might work. Can you try it if you have running project?

I tried with selectors - it works, though produces warning message in console: Warning: Failed prop type: Invalid propoptions.indicatorssupplied toReactIScroll.

[schovi]

@lemming Can you show me config?

[lemming]

Sorry, ended up using iScroll directly because of need to avoid instantiation of iScroll on every render, so no config left. But either selectors or refs working, though one should be careful with lifecycle in the latter case (ref have to be available before options object gets created and <ReactIScroll/> mounts).

In terms of usage example from readme it could be something like this:

var React = require('react'),
    ReactIScroll = require('react-iscroll'),
    iScroll = require('iscroll');

var ExampleApp = React.createClass({
  getDefaultProps: function() {
    return ({
      options: {
        mouseWheel: true,
        scrollbars: true,
        // add indicators section to options
        indicators: [{
          el: '#indicator', // selector of the indicator container
          resize: false,
          ignoreBoundaries: true,
          speedRatioY: 0.5
        }]

      }
    })
  },
  onScrollStart: function() {
    console.log("iScroll starts scrolling")
  },
  render: function() {
    var i = 0, len = 1000, listOfLi = [];

    for(i; i < len; i++) {
      listOfLi.push(<li key={i}>Row {i+1}</li>)
    }

    return (
      <div>
        {/* just add indicator with id */}
        <div id="indicator" style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, overflow: 'hidden'}}>
          <div style={{position: 'absolute', overlow: 'hidden', transform: 'translateZ(0)', width: '100%'}}>Indicator contents</div>
        </div>
        <div style={height: '100vh'}>
          <h1>Example of scrollable list</h1>
          <ReactIScroll iScroll={iScroll}
                      options={this.props.options}
                      onScrollStart={this.onScrollStart}>
            <ul>
              {listOfLi}
            </ul>
          </ReactIScroll>
        </div>
      </div>
    )
  }
})

[schovi]

Indicators are really special in case of React. It is some components somewhere. Maybe making some helper component would help to manage it.

[robinwkurtz]

Hello, I'm also getting an Invalid prop error.

Warning: Failed prop type: Invalid propoptions.indicatorssupplied toReactIScroll.

Options:

options: {
    startX: 0,
    startY: 0,
    scrollX: true,
    scrollY: false,
    indicators: [{
        el: document.getElementById('productWrapperInner'),
        listenX: true,
        listenY: false,
        interactive: true,
        shrink: 'clip',
        fade: true
    }],
    probeType: 2,
    directionLockThreshold: 5,
    freeScroll: false,
    disableMouse: false,
    mouseWheel: true,
    disableMouse: true,
    momentum: true,
    deceleration: 0.05,
    bounceTime: 800,
    eventPassthrough: true,
    reverseHorizontalScroll: true,
    wheelHorizontal: true,
    slideWidth: 180,
}

Any thoughts? solutions D:

Thanks!