acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add computed scrollbar gutter CSS vars

Browse Source
This commit is contained in:
Eric Bailey
2024-12-02 17:11:00 -06:00
parent 55eae34dc8
commit 69378a393c
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/templates/base.html
+16
View File
@@ -38,6 +38,10 @@
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
:root {
--scrollbar-offset: 0px;
--scrollbar-offset-negative: 0px;
}
html { html {
background-color: white; background-color: white;
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
@@ -82,6 +86,18 @@
} }
</style> </style>
<script>
try {
var windowWidth = window.innerWidth;
var html = document.documentElement;
var htmlWidth = html.getBoundingClientRect().width;
var scrollbarWidth = (windowWidth - htmlWidth) / 2;
var scrollbarOffset = scrollbarWidth / 2;
html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`);
html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`);
} catch (error) {}
</script>
{% include "scripts.html" %} {% include "scripts.html" %}
<link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ staticCDNHost }}/static/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="{{ staticCDNHost }}/static/favicon-32x32.png">
web/index.html
+16
View File
@@ -43,6 +43,10 @@
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
:root {
--scrollbar-offset: 0px;
--scrollbar-offset-negative: 0px;
}
html { html {
background-color: white; background-color: white;
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
@@ -86,6 +90,18 @@
width: 100%; width: 100%;
} }
</style> </style>
<script>
try {
var windowWidth = window.innerWidth;
var html = document.documentElement;
var htmlWidth = html.getBoundingClientRect().width;
var scrollbarWidth = (windowWidth - htmlWidth) / 2;
var scrollbarOffset = scrollbarWidth / 2;
html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`);
html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`);
} catch (error) {}
</script>
</head> </head>
<body> <body>