dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

STYLE: ListRow ScrollBar

Browse Source
This commit is contained in:
EvanLin3141
2025-03-04 17:09:22 +00:00
parent 726ba83a98
commit b974ea09c5
2 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/assets/styles/listRow.css
View File

@@ -1,8 +1,23 @@
.hide-scrollbar::-webkit-scrollbar { :root {
display: none; --scrollbar-background: linear-gradient(to right, #6a11cb, #2575fc);
--scrollbar-thumb: rgba(255, 255, 255, 0.6);
} }
.hide-scrollbar { ::-webkit-scrollbar {
-ms-overflow-style: none; height: 4px;
scrollbar-width: none; }
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.9);
}

2
frontend/src/components/Layout/ListRow.tsx
View File

@@ -47,7 +47,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
const [currentItems, setCurrentItems] = useState<ItemType[]>(items); const [currentItems, setCurrentItems] = useState<ItemType[]>(items);
const slider = useRef<HTMLDivElement>(null); const slider = useRef<HTMLDivElement>(null);
const scrollAmount = window.innerWidth * 0.3; const scrollAmount = window.innerWidth * 0.4;
const navigate = useNavigate(); const navigate = useNavigate();
const addMoreItems = (newItems: ItemType[]) => { const addMoreItems = (newItems: ItemType[]) => {