Skip to content

Links are not working on mobile devices #20

@devsli

Description

@devsli

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions