question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to disable vertical scroll on interact with slider?

See original GitHub issue

I’m facing a bad experience with slider, when interact and swipe up/down, scrolls on <ScrollView> occurs.

jul-22-2018 13-54-01

On FlatList or SectionList has a prop called verticalScrollingDisabled to prevent this behavior, has any kind of option on react-native-slider?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:5

github_iconTop GitHub Comments

4reactions
NesChaiyaponcommented, Sep 3, 2018

You can use scrollEnabled props to disable scrolling effect when drag slider like this.

state = { isScrollEnable: true}

<ScrollView scrollEnabled={this.state.isScrollEnable}>
 <Slider
    onSlidingStart={() => this.setState({ isScrollEnable: false })}
    onSlidingComplete={() => this.setState({ isScrollEnable: true })}
  />
</ScrollView>
0reactions
sallarcommented, Mar 14, 2022

You can wrap your slider component in PanGestureHandler from react-native-gesture-handler package. It stops the events from propagating

Read more comments on GitHub >

github_iconTop Results From Across the Web

Disable FlexSlider interactions when scrolling vertically
Disable vertical scrolling of the page, when the user swipes horizontally on the slider: jQuery(document).on('touchmove', function(event_) { ...
Read more >
How To Hide Scrollbars With CSS - W3Schools
How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example. body {
Read more >
How to Hide the Scrollbar in CSS - HubSpot Blog
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML; CSS. Result; Skip Results Iframe.
Read more >
Making text scrollable with a vertical slider | Unity UI Cookbook
If you prefer, you can disable the elastic effect, as was done in the previous recipe. To do this, just change Movement Type...
Read more >
How to disable scrolling temporarily using JavaScript
The window.onscroll event fires when the window has been scrolled. Overriding this function and setting it to a fixed position every time ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found