FIX: Fixed skill scroll problem (fixes #282) (#297)

* fix(components/Profile): Fixed skill scroll problem * fix(components/Profile): Fixed vertical scroll * Reverted Profile.css * Update Profile.css --------- Co-authored-by: Shyam Tawli <[email protected]>
shyamtawli · Jul 3, 2023 · e0358c5 · e0358c5 · vercel · Jul 3, 2023
1 parent 17b632b
commit e0358c5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
@@ -75,6 +75,7 @@
   white-space: nowrap;
   height: 30px;
   cursor: default;
+  display: inline;
 }
 
 .profile-link a {

diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
@@ -12,21 +12,25 @@ function Profile({ data }) {
   );
 
   function Card({ data }) {
+    const cardRef = React.useRef();
     const handleWheel = (event) => {
+      event.stopPropagation();
       event.preventDefault();
-      const container = event.target;
-      const delta = event.deltaY || event.deltaX;
-      container.scrollLeft += delta;
-    };
+      let container = event.target;
+      if (!container) return false;
 
-    const handleMouseEnter = () => {
-      document.addEventListener('wheel', handleWheel, { passive: false });
-    };
+      while (!container.classList.contains("skills-container")) {
+        container = container.parentNode;
+      }
 
-    const handleMouseLeave = () => {
-      document.removeEventListener('wheel', handleWheel);
+      const delta = event.deltaX || event.deltaY;
+      container.scrollLeft += delta;
     };
 
+    React.useEffect(() => {
+      cardRef.current.addEventListener('wheel', handleWheel, { passive: false })
+    }, []);
+
     return (
       <div className="profile-card">
         <div className="top-container">
@@ -41,7 +45,7 @@ function Profile({ data }) {
               </span>
               {data.location}
             </p>
-            <div className="skills-container" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            <div className="skills-container" ref={cardRef}>
               {data.skills.map((skill, index) => {
                 return (
                   <div className="skill" key={index}>