fix(CustomScrollView): use default scrollbar if hasPointer=false (#6437)

* fix(CustomScrollView): use default scrollbar if hasPointer=false - fixed #4756 --------- Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>
VKCOM · Jan 24, 2024 · 310162f · 310162f
1 parent ef45398
commit 310162f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 11 deletions.
diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css b/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
@@ -13,16 +13,6 @@
   overflow-x: hidden;
   padding-inline-end: 100px;
   position: relative;
-
-  /**
-   * Для удаление скролла в Firefox.
-   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
-   */
-  scrollbar-width: none;
-}
-
-.CustomScrollView__box::-webkit-scrollbar {
-  display: none;
 }
 
 .CustomScrollView__barY:active + .CustomScrollView__box {
@@ -83,3 +73,42 @@
 :global(.vkuiInternalCustomSelectDropdown--wide) .CustomScrollView__box {
   padding-inline-end: 0;
 }
+
+.CustomScrollView--hasPointer-true .CustomScrollView__box {
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+}
+
+.CustomScrollView--hasPointer-true .CustomScrollView__box::-webkit-scrollbar {
+  display: none;
+}
+
+@media (--pointer-has) {
+  .CustomScrollView--hasPointer-none .CustomScrollView__box {
+    /**
+     * Для удаление скролла в Firefox.
+     * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+     */
+    scrollbar-width: none;
+  }
+
+  .CustomScrollView--hasPointer-none .CustomScrollView__box::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/**
+ * Не отрисовываем полосу прокрутки, если у устройства отсутствует мышь
+ */
+.CustomScrollView--hasPointer-false .CustomScrollView__barY {
+  display: none;
+}
+
+@media (--pointer-has-not) {
+  .CustomScrollView--hasPointer-none .CustomScrollView__barY {
+    display: none;
+  }
+}
diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx b/packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useDOM } from '../../lib/dom';
@@ -9,6 +10,18 @@ import type { HasRootRef } from '../../types';
 import { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';
 import styles from './CustomScrollView.module.css';
 
+function hasPointerClassName(hasPointer: boolean | undefined) {
+  switch (hasPointer) {
+    case true:
+      return styles['CustomScrollView--hasPointer-true'];
+    case false:
+      return styles['CustomScrollView--hasPointer-false'];
+    case undefined:
+    default:
+      return styles['CustomScrollView--hasPointer-none'];
+  }
+}
+
 export interface CustomScrollViewProps
   extends React.AllHTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
@@ -32,6 +45,7 @@ export const CustomScrollView = ({
   ...restProps
 }: CustomScrollViewProps) => {
   const { document, window } = useDOM();
+  const { hasPointer } = useAdaptivity();
 
   const ratio = React.useRef(NaN);
   const lastTrackerTop = React.useRef(0);
@@ -181,7 +195,7 @@ export const CustomScrollView = ({
 
   return (
     <div
-      className={classNames(styles['CustomScrollView'], className)}
+      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}
       ref={getRootRef}
       {...restProps}
     >