React-native-web: ScrollTo not working on react-native-web

Created on 18 May 2018 · 6Comments · Source: necolas/react-native-web

I want to scroll to end on load of react-native-web page.But ScrollTo and scrollToEnd function does not seem to be working.

Could you please check this and revert back to me.

Source

sumanth234

Most helpful comment

Just a note to say that it might also be because you don't constrain the height of the container of the ScrollView. And thus the container expands as much as it needs, and scroll happens on the <body> element instead of on the ScrollView DOM element.

eightyfive on 20 Dec 2018

🎉6 ❤3

All 6 comments

Can you provide an example that doesn't work?

Storybook works http://necolas.github.io/react-native-web/storybook/?selectedKind=Components&selectedStory=ScrollView&full=0&addons=0&stories=1&panelRight=0

necolas on 18 May 2018

I stumbled upon this issue. scrollTo works when the the ScrollView is vertical, but it doesn't work (or maybe I don't know how to make it work) when the "horizontal" prop is set.

Diff from original storybook demo:

>         horizontal
34c35
<             this.scrollview.scrollTo({ y: 100 });
---
>             this.scrollview.scrollTo({ x: 100 });

Repro Complete Code:

/* eslint-disable react/jsx-no-bind */

/**
 * @flow
 */

import React, { PureComponent } from 'react';
import { Button, ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';

export default class ScrollToExample extends PureComponent {
  render() {
    return (
      <View style={styles.scrollViewContainer}>
        <ScrollView
        horizontal
          contentContainerStyle={styles.scrollViewContentContainerStyle}
          ref={scrollview => {
            this.scrollview = scrollview;
          }}
          scrollEventThrottle={16} // ~60 events per second
          style={styles.scrollViewStyle}
        >
          {Array.from({ length: 50 }).map((item, i) => (
            <TouchableHighlight
              key={i}
              onPress={() => {}}
              style={[styles.box, styles.horizontalBox]}
            >
              <Text>{i}</Text>
            </TouchableHighlight>
          ))}
        </ScrollView>
        <Button
          onPress={() => {
            this.scrollview.scrollTo({ x: 100 });
          }}
          title="Scroll to 100px"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    flexGrow: 1,
    justifyContent: 'center',
    borderWidth: 1
  },
  scrollViewContainer: {
    height: 150,
    width: 300
  },
  scrollViewStyle: {
    borderWidth: 1,
    marginBottom: '1.3125rem'
  },
  scrollViewContentContainerStyle: {
    backgroundColor: '#eee',
    padding: 10
  }
});

I am trying to implement draggable scrolling. Are there any workarounds for this?

murtraja on 13 Nov 2018

If there's a problem make a new issue please

necolas on 13 Nov 2018

eightyfive on 20 Dec 2018

🎉6 ❤3

Thanks alot @eightyfive been stuck with this problem but i tried what you told and it worked :)

vinaysandesh on 2 Jan 2021

If anyone else is still stuck on this with a horizontal scrollview try setting the width of your scrollview component to a valid value. This is what cased my issues on web