BosNaufal / react-scrollbar

The Simplest Scroll Area Component with custom scrollbar for React JS. https://bosnaufal.github.io/react-scrollbar
MIT License
71 stars 30 forks source link

Links are not working on mobile devices #20

Open devsli opened 7 years ago

devsli commented 7 years ago

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();