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

Links are not working on mobile devices #20

Open
devsli opened this issue Apr 21, 2017 · 0 comments
Open

Links are not working on mobile devices #20

devsli opened this issue Apr 21, 2017 · 0 comments

Comments

@devsli
Copy link

devsli commented Apr 21, 2017

Hi Naufal, thanks for magnificent component!

I experienced little bug recently, links are not clickable inside of <ReactScrollbar /> on mobile devices

Example: https://spreecode.github.io/react-scrollbar/

Safari iOS 9.3.5: Not working
Safari iOS 10.2: Not working
Opera Mini: Not working
Mobile Chrome: Tricky (sometimes working)
Mobile Firefox: Not working

I think the problem is here, when you comment out these lines then links are clickable. Obviously when commented out the scrolling behavior is not working as expected.


Here quick workaround:

diff --git a/src/react-scrollbar.jsx b/src/react-scrollbar.jsx
index 78b549e..b4335d8 100644
--- a/src/react-scrollbar.jsx
+++ b/src/react-scrollbar.jsx
@@ -246,8 +246,15 @@ class ScrollWrapper extends React.Component {
     } else cb();
   }
 
+  inHyperlinkNode(node) {
+    if (!node) return false;
+    return (node.href) ? true : this.inHyperlinkNode(node.parentNode);
+  }
+
   // DRAG EVENT JUST FOR TOUCH DEVICE~
   startDrag(event) {
+    if (this.inHyperlinkNode(event.target)) return;
+
     event.preventDefault();
     event.stopPropagation();
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

1 participant