Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get the axis-Y of the top #2

Open
lazywei opened this issue Apr 22, 2015 · 7 comments
Open

Get the axis-Y of the top #2

lazywei opened this issue Apr 22, 2015 · 7 comments

Comments

@lazywei
Copy link

lazywei commented Apr 22, 2015

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
Copy link
Contributor

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
Copy link
Author

lazywei commented Apr 24, 2015

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

@ccheever
Copy link
Contributor

@lazywei Just something I wrote:

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

@michalraska
Copy link

@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
Copy link
Author

lazywei commented Apr 28, 2015

Actually I got the same error too....

-- Chih-Wei
Sent from Mailbox

On Tue, Apr 28, 2015 at 6:02 PM, Michal Raška notifications@github.com
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
Copy link

yhuang0 commented Jun 8, 2015

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

@braco
Copy link

braco commented Dec 23, 2016

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants