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

This commit is contained in:
Mikhail Chechnev 2024-09-26 19:26:00 +03:00
parent 3588322ced
commit 97472bec14
2 changed files with 28 additions and 2 deletions

View File

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

View File

@ -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;
}