В компонент Scroll добавлен необязательный пропс, позволяющий скролит…

src/shared/ui/Scroll/Scroll.tsx

@@ -1,19 +1,58 @@
-import React, { FC } from 'react'
+import React, { FC, MouseEvent, useRef } from 'react'
 
 import styles from './Scroll.module.scss'
 
 export type TProps = {
   className?: string
   children: React.ReactNode
+  withManualGrip?: boolean
 }
 
 /**
  * Scrollbar
  * @param {string} className - для дополнительных свойств
  * @param {React.ReactNode} children - элементы внутри компонента
+ * @param {boolean} withManualGrip - флаг, использовать ли ручной захват содержимого для скроллинга
  */
-const Scroll: FC<TProps> = ({ className, children }) => {
-  return <div className={`${styles.scroll} ${className}`}>{children}</div>
+const Scroll: FC<TProps> = ({ withManualGrip = false, className, children }) => {
+  const listRef = useRef<HTMLDivElement>(null)
+  const startX = useRef(0)
+  const startScrollLeft = useRef(0)
+  const isDragging = useRef(false)
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    startX.current = e.clientX
+    if (listRef && listRef.current) {
+      startScrollLeft.current = listRef.current.scrollLeft
+    }
+    isDragging.current = true
+  }
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    if (!isDragging.current) return
+    const deltaX = e.clientX - startX.current
+    if (listRef.current) {
+      listRef.current.scrollLeft = startScrollLeft.current - deltaX
+    }
+  }
+
+  const handleMouseUp = () => {
+    isDragging.current = false
+  }
+
+  return withManualGrip ? (
+    <div
+      className={`${styles.scroll} ${className}`}
+      ref={listRef}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}>
+      {children}
+    </div>
+  ) : (
+    <div className={`${styles.scroll} ${className}`}>{children}</div>
+  )
 }
 
 export default Scroll

src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useEffect, useRef, type FC } from 'react'
+import { useEffect, type FC } from 'react'
 import { useSelector } from 'react-redux'
 
 import { StateSchema } from '@/app/providers/StoreProvider'
@@ -10,6 +10,7 @@ import { IFeedback } from '@/features/Reviews/model/types/types'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
+import Scroll from '@/shared/ui/Scroll/Scroll'
 
 import styles from './reviewsBlock.module.scss'
 
@@ -31,37 +32,13 @@ const ReviewsBlock: FC<Props> = props => {
 
   const dispatch = useAppDispatch()
   const reviews = useSelector((store: StateSchema) => store.feedbacks)
-  const listRef = useRef<HTMLDivElement>(null)
-  const startX = useRef(0)
-  const startScrollLeft = useRef(0)
-  const isDragging = useRef(false)
 
   useEffect(() => {
     dispatch(getFirstFeedbacks())
 
     dispatch(getAverageMark())
   }, [])
 
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-    startX.current = e.clientX
-    if (listRef.current) {
-      startScrollLeft.current = listRef.current.scrollLeft
-    }
-    isDragging.current = true
-  }
-
-  const handleMouseMove = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-    if (!isDragging.current) return
-    const deltaX = e.clientX - startX.current
-    if (listRef.current) {
-      listRef.current.scrollLeft = startScrollLeft.current - deltaX
-    }
-  }
-
-  const handleMouseUp = () => {
-    isDragging.current = false
-  }
-
   return (
     <section className={styles.wrapper}>
       <article className={styles.header}>
@@ -75,13 +52,7 @@ const ReviewsBlock: FC<Props> = props => {
           {IconLink({ styles: styles.svg })}
         </Link>
       </article>
-      <div
-        ref={listRef}
-        onMouseMove={handleMouseMove}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        className={styles.list}>
+      <Scroll className={styles.list} withManualGrip={true}>
         <ReviewCard
           key="feadbackHeader"
           pk={0}
@@ -102,7 +73,7 @@ const ReviewsBlock: FC<Props> = props => {
             index={index}
           />
         ))}
-      </div>
+      </Scroll>
     </section>
   )
 }

src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss

@@ -34,27 +34,4 @@
     margin-left: 0.5rem;
     vertical-align: middle;
   }
-
-  .list {
-    display: flex;
-    gap: 20px;
-    max-width: 100%;
-    padding: 20px 25px;
-    overflow: auto hidden;
-    cursor: grab;
-
-    &::-webkit-scrollbar {
-      height: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: color.$theme-primary-color;
-      cursor: grab;
-    }
-
-    &::-webkit-scrollbar-track {
-      margin-left: 25px;
-      margin-right: 25px;
-    }
-  }
 }

src/widgets/ViewedProducts/ViewedProducts.module.scss

@@ -33,5 +33,6 @@
 
   &__scroll {
     width: 100%;
+    user-select: none;
   }
 }

src/widgets/ViewedProducts/ViewedProducts.tsx

@@ -52,7 +52,9 @@ export const ViewedProducts: FC<IViewedProductsProps> = ({ title, hasLabel }) =>
         <Heading className={styles.viewedproducts__title}>{title}</Heading>
         {hasLabel && <span className={styles.viewedproducts__label}>Вы смотрели</span>}
       </div>
-      <Scroll className={styles.viewedproducts__scroll}>{productList}</Scroll>
+      <Scroll className={styles.viewedproducts__scroll} withManualGrip={true}>
+        {productList}
+      </Scroll>
     </section>
   )
 }