<div class="overflow overflow--scroll">
<div class="element">
<h2><small>overflow: scroll</small> scrollbar-gutter: auto</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
<p class="hidden content">ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
</div>
</div>
<div class="overflow overflow--auto">
<div class="element">
<h2><small>overflow: auto</small> scrollbar-gutter: auto</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
<p class="hidden content">ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
</div>
</div>
<div class="actions">
<button class="button">Toggle Content</button>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
align-items: start;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
gap: 2rem;
padding: 1rem;
}
.overflow {
width: 100%;
max-block-size: 300px;
border: 1px solid #f9f9f9;
border-radius: 4px;
box-shadow: 0 0 1px rgb(0 0 0 / 0.4);
padding: 20px;
background-color: rgb(190 90 90 / 0.5);
}
.element {
width: 100%;
padding: 0.622em;
background: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
linear-gradient(
135deg,
rgba(84, 232, 220, 1) 0%,
rgba(241, 231, 103, 1) 25%,
rgba(240, 229, 104, 1) 50%,
rgba(254, 182, 69, 1) 75%,
rgba(250, 118, 47, 1) 100%
);
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%;
background-blend-mode: hard-light, overlay, screen, saturation;
color: #000;
letter-spacing: 0.0125em;
hyphens: auto;
text-shadow: 1px 1px 0 rgb(255 255 255 / 50%);
font-size: 1.25em;
}
.element > * + * {
margin-block-start: 1rem;
line-height: 1.6;
}
h2 {
text-align: center;
}
h2 > small {
display: block;
font-size: 0.8em;
padding-bottom: 0.25em;
border-bottom: 2px dashed currentColor;
margin-bottom: 0.25em;
}
.actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
padding: 2rem;
background: rgb(16 18 27 / 40%);
backdrop-filter: blur(20px);
}
.button {
--background-color: #1b86f9;
-webkit-appearance: button;
background-color: var(--background-color);
border: none;
color: #fff;
border-radius: 8px;
padding: 1em 2em;
box-shadow: 0 0 0.2em var(--background-color);
cursor: pointer;
font-family: "Exo", Arial, sans-serif;
transition: all 0.28s ease-in-out;
}
.button:focus,
.button:hover {
--background-color: #3f51b5;
}
.hidden {
display: none;
}
.overflow {
scrollbar-gutter: auto;
}
.overflow--scroll {
overflow-y: scroll;
}
.overflow--auto {
overflow-y: auto;
}
let addContent = document.querySelector(".button");
let contents = document.querySelectorAll(".content");
addContent.addEventListener("click", () => {
contents.forEach((content) => {
content.classList.toggle("hidden");
});
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.