Skip to content

Commit 78a7a04

Browse files
committed
Resolves velopert#18
Set max-height to PostTocBlock and show custom scrollbar
1 parent e596204 commit 78a7a04

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

src/components/post/PostToc.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,30 @@ const PostTocBlock = styled(Sticky)`
2323
margin-left: 5rem;
2424
border-left: 2px solid ${palette.gray2};
2525
padding-left: 0.75rem;
26+
padding-right: 0.75rem;
2627
padding-top: 0.25rem;
2728
padding-bottom: 0.25rem;
2829
color: ${palette.gray6};
2930
line-height: 1.5;
3031
font-size: 0.875rem;
32+
max-height: calc(100vh - 128px);
33+
overflow-y: auto;
34+
overflow-x: hidden;
35+
36+
&::-webkit-scrollbar {
37+
border-radius: 1px;
38+
width: 2px;
39+
&:hover {
40+
width: 16px;
41+
}
42+
background: ${palette.gray1};
43+
}
44+
45+
&::-webkit-scrollbar-thumb {
46+
z-index: 100;
47+
background: ${palette.gray8};
48+
/* -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); */
49+
}
3150
`;
3251

3352
const TocItem = styled.div<{ active: boolean }>`

0 commit comments

Comments
 (0)