GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -94,29 +94,38 @@ const Morceaux = () => {
         const json = await response.json();
         setProducts([...json]);
         setIsLoading(false);
+    }
 
+    const handleScroll = async (e) => {
+        const target = e.target;
+        if (!isLoading && !isSearch) {
+            if (target.scrollTop + target.clientHeight + 300 >= target.scrollHeight) {
+                await handleNextItems();
+            }
+        }
     }
 
     return (
-        <div className="morceaux">
+        <div className="morceaux" >
             <div className="morceaux-options-container">
                 <div className='filters-container'>
                     <Filters onChange={handleFilters} />
                 </div>
+
                 <div className="sorting-container">
                     <Sorting onChange={handleOrder} />
                 </div>
             </div>
-            <div className="morceaux-container">
+            <div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
                 <ItemList items={products} />
             </div>
             <div className={isLoading ? "cat-load" : "d-none cat-load"} />
             <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
-            <div>
+            {/* <div>
                 {!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
                     ...
                 </Button>}
-            </div>
+            </div> */}
         </div>
     );
 }

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -469,6 +469,36 @@ html {
     margin-bottom: 16px;
 }
 
+
+ /* width */
+ ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: beige;
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: plum;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: purple;
+  } 
+
+.morceaux-container{
+    padding-top:10px;
+    height: 620px;
+    overflow-y: scroll;
+    border: purple 2px solid;
+    border-radius: 5px;
+    background-color: rgba(245, 245, 220, 0.25);
+}
+
 .filters-btn-container{
     width:100%;
     display:flex;
@@ -723,6 +753,11 @@ html {
 /* -------------------------------------------------------- */
 
 @media (max-width:450px) {
+
+    .morceaux-container{
+        height: 450px;
+    }
+
     .item {
         width: 85%;
     }