blob: 1ce438f569473ffbe0bd358d43abba4cc386db06 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
import Layout from '../layouts/Layout.astro';
import Profile from '../components/Profile.astro';
import List from '../components/List.astro';
import Shadow from '../components/Shadow.astro'
---
<Layout title="Welcome to Astro.">
<main class="container" id="container">
<Profile></Profile>
<List></List>
<Shadow></Shadow>
</main>
</Layout>
<style>
.container {
position: relative;
margin: auto;
padding: 0.3125rem;
max-width: 600px;
width: 90%;
height: 100vh;
overflow: hidden;
scrollbar-width: 8px;
scrollbar-color: var(--zinc-900) var(--zinc-950)
}
</style>
<script>
(() => {
// show or hide shadow, works only if content leaves viewport
const mainContent = document.getElementById('container');
const shadow = document.getElementById('shadow');
const shadowButton = document.getElementById('shadow-button');
shadowButton.addEventListener('click', () => {
if (shadow.style.position === 'absolute') {
shadow.style.position = 'relative';
mainContent.style.overflow = 'auto';
shadowButton.children[0].textContent = 'Show Less';
} else {
shadow.style.position = 'absolute';
mainContent.style.overflow = 'hidden';
mainContent.scroll(0,0);
shadowButton.children[0].textContent = 'Explore More';
}
});
// Hide the shadow if the content is minimal enough to leave the viewport
const list = document.getElementById('list');
const observerList = list.getBoundingClientRect();
if (observerList.bottom < window.innerHeight) {
shadow.style.display = 'none';
mainContent.style.overflow = 'auto';
}
})();
</script>
|
