WEB APP: P8PGantt - стиль полос прокрутки по умолчанию

app/components/p8p_gantt.js

@@ -7,7 +7,7 @@
 //Подключение библиотек
 //---------------------
 
-import React, { useEffect, useState, useCallback } from "react"; //Классы React
+import React, { useEffect, useState, useCallback, useRef } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
 import {
     Box,
@@ -364,6 +364,9 @@ const P8PGantt = ({
         editTask: null
     });
 
+    //Ссылки на DOM
+    const svgContainerRef = useRef(null);
+
     //Отображение диаграммы
     const showGantt = useCallback(() => {
         if (!state.gantt) {
@@ -418,6 +421,11 @@ const P8PGantt = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tasks]);
 
+    //При подключении компонента к старице
+    useEffect(() => {
+        svgContainerRef.current.children[0].classList.add("scroll");
+    }, []);
+
     //Генерация содержимого
     return (
         <div style={{ ...(containerStyle ? containerStyle : {}) }}>
@@ -468,7 +476,7 @@ const P8PGantt = ({
                     cancelBtnCaption={cancelTaskEditorBtnCaption}
                 />
             ) : null}
-            <div style={STYLES.GANTT(state.noData, title, zoomBar)}>
+            <div style={STYLES.GANTT(state.noData, title, zoomBar)} ref={svgContainerRef}>
                 <svg id="__gantt__" width="100%"></svg>
             </div>
         </div>

css/p8-panels.css

@@ -0,0 +1,18 @@
+.scroll::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+
+.scroll::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #ebebeb;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #b4b4b4;
+}
+
+.scroll::-webkit-scrollbar-thumb:hover {
+    background-color: #808080;
+}