Get the axis-Y of the top

[lazywei]

Hi,

When scrolling, I'd like to check if we are at the top-most because I'd like to load more messages when scroll to top-most. In original scroll view, I can check if the

onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)}

to see if the y is less then 0. However, in inverted scroll view, the y is increasing when scrolling up. In such case, how can I tell if I've already scrolled to the top-most?

Thanks.

[ccheever]

I wrote some code earlier to do this to figure out the bottom of a normal scroll view.
This is fragile and a little bit janky but the general technique might be helpful to you.

    var listViewScrollView = this.getScrollResponder();

    this.refs.listview.requestAnimationFrame(() => {
      listViewScrollView.refs.InnerScrollView.measure((x, y, width, height, offsetX, offsetY) => {
        listViewScrollView.refs.ScrollView.measure((x_, y_, width_, height_, offsetX_, offsetY_) => {
          //console.log("x=", x, "y=", y, "width=", width, "height=", height, "offsetX=", offsetX, "offsetY=", offsetY);
          //console.log("x'=", x_, "y'=", y, "width'=", width_, "height'=", height_, "offsetX'=", offsetX_, "offsetY'=", offsetY_);
          var scrollPadding = 3;
          var scrollTo = height - height_ + y + scrollPadding;

          // marginTop needs to be included
          // offsetY needs to to be included, offsetY_ seems to always match it
          // bigger offsetY means scrolled up; smaller offsetY means scrolled down
          // when offsetY == InnerScrollView.height
          // offsetY + InnerScrollView.height = ScrollView.height

          // offsetY    marginTop    y_    y/height        scrollTo   marginTop - offsetY
          // 0          131          0     533             405        131 - 0 = 131
          // -122       -253         -253  533             405        -253 - (-122) = -131

          //
          var currentScrollTo = y - offsetY + offsetY_ + scrollPadding;
          var delta = Math.abs(scrollTo - currentScrollTo);
          var threshold = 45;

          //console.log("scrollingTo:", scrollTo);
          var doScroll;
          if (opts.maybe) {
            if (delta < threshold) {
              doScroll = true;
            } else {
              doScroll = false;
            }
          } else {
            doScroll = true;
          }
          //Ion.console.log("offsetY=", offsetY, "offsetY_=", offsetY_, "InnerScrollView.height=", height, "ScrollView.height=", height_, "y=", y, "y_=", y_, "doScroll=", doScroll, "scrollTo=", scrollTo, "marginTop=", this.props._conversationMarginTop, "inputHeight=", inputDimensions.height, "currentScrollTo=", currentScrollTo, "threshold=", threshold, "delta=", delta, "(y - height)=", (y - height));

          //doScroll = false;

          if (doScroll) {
            if (opts.withoutAnimation) {
              listViewScrollView.scrollWithoutAnimationTo(scrollTo);
            } else {
              listViewScrollView.scrollTo(scrollTo);
            }
          } else {
            Ion.console.log("Not scrolling because too far apart and maybe");
          }

          //Ion.console.log("old _innerScrollViewOffsetY=", this._innerScrollViewOffsetY, "new _innerScrollViewOffsetY=", offsetY, "old _scrollViewOffsetY", this._scrollViewOffsetY, "new _scrollViewOffsetY=", offsetY_);
          this._innerScrollViewOffsetY = offsetY;
          this._scrollViewOffsetY = offsetY_;

          if (callback) {
            callback(scrollTo);
          }
        });
      });
    });

[lazywei]

@ccheever how can I access the getScrollResponder() function?

[ccheever]

@lazywei Just something I wrote:

  getScrollResponder: function () {
    return this.refs.listview.getScrollResponder();
  },

[michalraska]

@lazywei Did you solve it?
When I'am trying this:

        <InvertibleScrollView
          ref='messages'
          inverted
          automaticallyAdjustContentInsets={false}
          contentInset={{bottom: 64}}
          onScroll={this.handleScroll}
          scrollEventThrottle={200}
        >
        {reloading}
        {content}
        {nextLoading}
        </InvertibleScrollView>

And I want to get scroll responser by: this.refs.messages.getScrollResponder() so it throws error: this._scrollView.getScrollResponder is not a function at: InvertibleScrollView.js:35

[lazywei]

Actually I got the same error too....

-- Chih-Wei
Sent from Mailbox

On Tue, Apr 28, 2015 at 6:02 PM, Michal Raška [email protected]
wrote:

@lazywei Did you solve it?
When I'am trying this:

        <InvertibleScrollView
          ref='messages'
          inverted
          automaticallyAdjustContentInsets={false}
          contentInset={{bottom: 64}}
          onScroll={this.handleScroll}
          scrollEventThrottle={200}
        >
        {reloading}
        {content}
        {nextLoading}
        </InvertibleScrollView>

And I want to get scroll responser by: this.refs.messages.getScrollResponder() so it throws error: this._scrollView.getScrollResponder is not a function at: InvertibleScrollView.js:35

Reply to this email directly or view it on GitHub:
#2 (comment)

[yhuang0]

@lazywei @michalraska
Make sure you apply this patch: facebook/react-native#766

[braco]

    <InvertibleScrollView
      inverted={true}
      onScroll={this.handleScroll}
      scrollEventThrottle={500}
    />

  handleScroll = e => {
    const fromTop = e.nativeEvent.contentSize.height - e.nativeEvent.contentOffset.y - e.nativeEvent.layoutMeasurement.height;
  }