for a personal project I'm using Nextjs and locomotive-scroll, I'm trying to stick an element with position:sticky; and data-scroll-sticky but it's still not work, here is the code:
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit ut orci nec malesuada. Integer condimentum auctor orci, non aliquam ex finibus blandit. Pellentesque suscipit mi egestas augue elementum consectetur. Sed suscipit, metus ut tempor
hendrerit, nulla leo auctor sapien, a mollis neque lorem vitae sapien. Curabitur eleifend, metus eu luctus malesuada, tortor est facilisis est, ut tempor libero lorem et nisl. Donec vitae gravida augue, in finibus lectus. Integer gravida elementum
mi ut ultricies. Mauris non blandit dui. Praesent quis ante et orci sollicitudin molestie feugiat ac magna. Sed vitae tincidunt urna, vitae placerat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus molestie felis nibh, in lobortis purus malesuada ac. Proin pellentesque sodales quam, at lacinia odio cursus et. Vestibulum blandit felis quis orci tincidunt, sit amet dignissim nibh porttitor. Nullam urna lorem, convallis lacinia ipsum
sit amet, efficitur interdum elit. Donec sit amet lobortis nibh. Mauris molestie augue nunc. Nam eget lacinia nisl, ut ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada
pellentesque risus quis dapibus. Vivamus a enim iaculis, sollicitudin nisi a, dapibus lectus. Nullam malesuada est tortor, ut aliquet mi faucibus et. Suspendisse egestas tincidunt commodo. Quisque nibh metus, egestas et commodo quis, sollicitudin
eget justo. Proin vestibulum leo est, vitae euismod nibh ornare ac. Curabitur tempus orci metus, vel sodales dui malesuada ut. Integer lobortis eros justo, sit amet feugiat odio rutrum non. Pellentesque molestie porttitor est et tempus. Etiam quis
lorem urna. Quisque quam ex, pulvinar at eleifend nec, iaculis quis nisi. In feugiat laoreet consectetur. Suspendisse molestie, nibh ullamcorper suscipit cursus, diam libero consequat ex, in sodales est augue ut ante. Curabitur dapibus iaculis magna
nec cursus. Donec convallis iaculis massa nec vulputate. Etiam elementum, urna sit amet ullamcorper pretium, enim arcu tincidunt mauris, non laoreet augue felis eu felis. Praesent hendrerit ullamcorper maximus. In pretium dui vitae odio accumsan
ultricies. In interdum quis tortor quis viverra. Duis mi sem, cursus ac est sed, commodo venenatis ante. Proin ac ipsum nisi. Donec vestibulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim.
Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla. Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim.
Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur,
arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae
viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
codepen
thank u all
You need to include locomotive-scroll.css as stated in the documentation.
It should make your code work without the empty gap that appears at the beginning of the page. It will also add the CSS styling required for the locomotive-scroll to work properly.
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
#import url(https://raw.githubusercontent.com/locomotivemtl/locomotive-scroll/master/dist/locomotive-scroll.css);
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
top: 0;
}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
ulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim. Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla.
Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim. Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit
orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur, arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi
turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget
dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
velit cursus nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
Related
First question here; so i hope you can help me! I am sorry in advance if i forgot any info!;)
I have a div with a background in it. The background needs to be scaled to fit the whole width of the screen; this works and the background image does remain its aspect ratio. But the problem is that the screen cuts of the height, i expect a scrollbar to scroll down to see the whole background image.
Can somebody help me with this problem?
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x400/000/fff");
background-repeat: no-repeat;
background-size: cover;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
.body {
padding: 0px;
margin: 0px;
height: 100%;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
Use an image tag
<div class="firstdiv"><img src="./Afbeelding_Landingspagina.png"/></div>
remove overflow hidden, add width and height to image
.firstdiv {
overflow: visible;
}
.firstdiv > img {
widht: 100%;
height: 100%;
}
If you want to display text on top of the image without messing up you can use z-index and position: abosolute. For example
.firstdiv > p {
z-index: 999;
position: absolute;
top: 10px;
}
Set your body with height: auto;
Set in your .firstDiv the background-position:center; min-height:100vh; this will make it the whole div height and keeps the image aspect ratio.
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x600/0011ff/f50e0e");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
min-height:100vh;
}
.body {
padding: 0px;
margin: 0px;
height: auto;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
I changed everything to the IMG solution, as i want the background-image larger then screen this seems to be the better solution.
THis solutions works on most devices; but i still have one problem:
It looks like the second div overflows the first div.
This is how it should be
This is how it looks on bigger screen
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class= "firstdiv"><img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
</body>
</html>
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
max-height; 100%;
}
CSS error here
Image here
Does anyone know why it says this, when I have referred to many documents?
I have a pop-up image that I want to appear from the bottom of the page and stops at the center.
HTML:
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent" style="display: none">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
CSS:
.circle-parent {
position: fixed;
top: 0;
left: 0;
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
margin: auto;
bottom: 0px;
display: block;
outline: none;
max-width: none;
max-height: none;
cursor: default;
}
JS:
// window.addEventListener("load", function() {
// const popUp = document.getElementById("circle-parent")
// popUp.style.top = "20vh";
// })
Edithed according to your new (Edith).
function handleButtonClick() {
const popUp = document.getElementById("circle-parent");
console.log("onclick buttons work!");
if (popUp.style.display === "none") {
popUp.style.display = "block"; // elements visible
} else {
popUp.style.display = "none"; // elements hidden
}
}
window.addEventListener("load", function() {
const popUp = document.getElementById("circle-parent");
popUp.style.top = "10vh";
// handleClose for close/get quotes button
document.addEventListener("visibilitychange", () => {
// if (!cookieExists()) {
if (document.visibilityState === "hidden") {
popUp.style.display = "none";
} else if (document.visibilityState === "visible") {
popUp.style.display = "block";
// setCookie(cookieName);
}
// }
// else {
// setCookie(uklFocusCookie)
// }
});
});
.circle-parent {
position: fixed;
left: calc(50% - 225px);
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
outline: none;
top: 140vh;
transition: all 1s ease;
}
.close-button {
position: absolute;
left: 80%;
top: 5%;
z-index: 1;
cursor: pointer;
}
.quotes-button {
position: absolute;
top: 67%;
left: 22%;
z-index: 1;
cursor: pointer;
}
.background {
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: auto;
background-color: rgb(0, 0, 0);
opacity: 0.83;
}
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
<div class="other-stuff-behind">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sapien dolor, consequat a ipsum id, pharetra mattis felis. Cras blandit urna tellus, et facilisis ante auctor vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Integer sollicitudin erat ac lacus luctus consectetur. Donec ac lectus nulla. Aenean maximus rhoncus justo, ut dictum justo finibus eu. Donec dignissim erat at odio facilisis, sed placerat odio accumsan. Nulla vehicula arcu id semper
fermentum. Nulla vel tempus nisl. Fusce efficitur viverra blandit. Nunc condimentum sodales convallis. Aliquam malesuada enim nec vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Phasellus consectetur tristique justo, quis dignissim felis dapibus id. Curabitur eu orci a odio egestas sodales. Morbi luctus metus quis ipsum pharetra gravida. Vivamus nec condimentum elit. Vivamus rutrum imperdiet nisi, pulvinar condimentum
leo consequat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ac felis et nibh mollis porta non in augue. Phasellus sollicitudin erat ac orci auctor, eget efficitur diam pulvinar. Etiam
eu elit ac purus interdum laoreet. Vivamus rutrum, urna sed ultrices sagittis, libero urna aliquam justo, vel tincidunt lorem quam vel est. Maecenas ut tortor nec leo vestibulum ullamcorper at vitae sem. Quisque libero nulla, vulputate in
mauris et, tempor cursus nisi. In sed metus pulvinar tortor varius dapibus. In quis diam sagittis, dictum arcu in, congue nibh. Suspendisse interdum nisl ac risus elementum, sit amet accumsan lorem semper. Curabitur laoreet a dolor at dictum.
Ut ac facilisis quam. Mauris ut ultricies enim, ultrices auctor lorem. Proin fermentum nisl felis, aliquet maximus urna eleifend tincidunt. Nulla quam arcu, porttitor suscipit turpis eu, dignissim varius ipsum. Nulla non urna nunc. Phasellus
egestas laoreet leo in ultricies. Donec gravida fermentum nunc at ultrices. Integer quis lacus id enim lacinia convallis lacinia non neque. Integer molestie tempus fringilla. Suspendisse non leo pulvinar odio placerat aliquam eget sit amet
sem. Aenean pulvinar porta diam at finibus. Aenean pellentesque orci sit amet augue imperdiet, ut sollicitudin leo accumsan. Ut aliquam tortor quis quam volutpat, pulvinar semper augue egestas. Nullam dapibus accumsan gravida. Integer euismod
justo a elit dictum, eget pulvinar elit sagittis. Pellentesque et felis lacus. Curabitur scelerisque, mi vitae sollicitudin placerat, risus odio eleifend mi, non tincidunt nisi odio at orci. Etiam sit amet ex lacinia, molestie ligula sed,
luctus justo. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam
mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam.
Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec
sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id, laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis
ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula
accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec
tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra
ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis. Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor
felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla
convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis, sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo
sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor
quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt
nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at
ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed
nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam. Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus
vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id,
laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum
nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus
neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo
id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis.
Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante
eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis,
sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus
in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo
ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris.
</div>
I am trying to display a body border on my screen with rounder corners on top to mimic for exemple the MacOS interface in the browser as the following image :
The problem is when I scroll, the top corners disappear :
Here is what i have html (though it is in react) :
body:before,
body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
}
body:before {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 20px;
top: 0;
}
body:after {
bottom: 0;
height: 10px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-left: 10px solid #900;
border-right: 10px solid #900;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<div class="App">
<div class="App-header">
<span class="term-name">
Header Title
</span>
</div>
<div class="container">
<p></p>
</div>
</div>
CSS is definitely not my strength and I am struggling to figure out how to do this...
You can create the left and right borders using a linear gradient background, with background-attachment: fixed, so it won't scroll with the content:
body:before,
body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
}
body:before {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 20px;
top: 0;
}
body:after {
bottom: 0;
height: 10px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(to right, #900 10px, transparent 10px, transparent calc(100% - 10px), #900 calc(100% - 10px)) no-repeat fixed;
background-position: 0 10px;
}
.container {
height: 200vh;
padding: 0 2em;
}
<div class="App">
<div class="App-header">
<span class="term-name">
Header Title
</span>
</div>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis est et eleifend facilisis. Aliquam rutrum libero vitae scelerisque varius. Vestibulum varius ipsum nisl, non elementum mauris feugiat in. Nam eget ultricies turpis, id aliquet
risus. In lacinia neque odio. Morbi tincidunt elit egestas vulputate congue. Donec eget arcu quis lectus sollicitudin hendrerit viverra vitae orci. In vel sem sit amet augue egestas tincidunt quis ac libero. Nullam ut mollis justo, et gravida augue.
Morbi elementum, sem ac tempor commodo, tellus lacus elementum risus, ac condimentum nisl nulla at orci. Donec suscipit, felis id iaculis ornare, risus ante imperdiet elit, a eleifend urna justo nec leo. Suspendisse fermentum malesuada mi non lacinia.
Sed vitae erat ligula. In est tortor, iaculis a tincidunt eu, sodales et urna. Fusce at ante vitae risus fringilla auctor et in arcu. Nam mi ante, placerat at auctor sit amet, pretium ut urna. Integer id imperdiet enim. Sed pulvinar ligula viverra
ultricies finibus. Ut nisl ligula, tincidunt sed risus porta, laoreet feugiat magna. Praesent laoreet felis in aliquet pretium. Donec sit amet enim faucibus, volutpat magna vel, cursus elit. Aenean sit amet nisl quis arcu ullamcorper facilisis. Nulla
sed est eget turpis euismod dictum. Pellentesque posuere eu elit nec pulvinar. Maecenas eget congue ex. Mauris a laoreet arcu. Integer arcu mi, aliquet eu lacus tincidunt, vulputate commodo ipsum. Donec vitae nulla tincidunt, volutpat risus blandit,
porttitor tellus. Duis id efficitur lacus, sit amet cursus orci. Donec eleifend mi a quam cursus porttitor. Phasellus egestas laoreet tristique. Nullam nec suscipit dui. Donec efficitur imperdiet ipsum at ullamcorper. Praesent ligula mi, suscipit
elementum gravida eget, imperdiet egestas lorem. Aenean vehicula nunc sit amet pellentesque tincidunt. Vestibulum tellus enim, cursus nec mi pulvinar, sollicitudin euismod dolor. Duis lacinia faucibus velit quis elementum. Donec convallis mattis odio,
vitae laoreet arcu. Phasellus eget nisi nibh. Nulla eu odio ligula. Nam lacus sapien, tincidunt vitae magna egestas, placerat efficitur sem. Phasellus massa nibh, placerat at accumsan ac, viverra congue ante. Nam non metus pulvinar magna convallis
fermentum ut id mi. Proin ac mauris vitae sapien eleifend facilisis. Donec volutpat porta justo id porta. Duis semper nibh a diam condimentum, consequat tempus mi volutpat. Mauris ut ipsum ac leo laoreet ullamcorper sit amet ut neque. Sed dolor mauris,
blandit elementum lobortis id, aliquet sed metus. Quisque a viverra nibh. Nullam accumsan interdum justo, vitae mattis dolor sollicitudin ut. Duis tristique libero sit amet sem congue, nec suscipit odio interdum. Quisque metus quam, euismod eu sem
sed, mattis rhoncus augue. Praesent leo urna, placerat vel velit id, volutpat mattis eros. Maecenas ut mi justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit condimentum libero vel finibus. Sed id neque in metus sodales fringilla.
Nam placerat, est euismod elementum blandit, nisi felis venenatis odio, nec sodales justo libero id nulla. Etiam finibus euismod pharetra. Pellentesque ac tincidunt nunc. Morbi convallis nec justo sit amet malesuada. Curabitur a mauris ac odio auctor
eleifend. Nam ut magna elementum, hendrerit ipsum ut, rutrum neque. Sed vel mattis neque. Nullam finibus pulvinar justo et vehicula. Quisque id feugiat augue. Etiam varius, dui sit amet egestas cursus, dui erat vestibulum mauris, vel volutpat arcu
dui a ipsum. In rhoncus ipsum porta lacinia vestibulum. Suspendisse potenti. Fusce iaculis nibh nisi, non varius erat fringilla ut. Fusce vel hendrerit ipsum. Nam varius ex elit, sed elementum augue tincidunt ut. Vivamus lobortis nulla dui, gravida
dignissim neque porttitor non. Suspendisse dui metus, laoreet eu nibh non, venenatis viverra ligula. Maecenas suscipit nunc orci, eu pretium enim consequat a. Donec quis neque malesuada, laoreet leo non, ornare erat. Vivamus feugiat ullamcorper dui
a porta. Maecenas ullamcorper, ante et laoreet interdum, sapien ipsum feugiat elit, at viverra neque tellus et libero. Donec non libero at nulla ornare lobortis non ac ligula. Nullam viverra egestas erat sit amet ultrices. Aenean vulputate tellus
turpis, id imperdiet elit convallis ac. Mauris at elit urna. Nulla facilisi. Fusce vitae iaculis massa, sed ullamcorper urna. Mauris lacinia magna sed sollicitudin viverra. Aenean interdum tincidunt posuere. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Curabitur ipsum tortor, scelerisque eget ipsum id, sagittis volutpat enim. Morbi congue nulla id porttitor hendrerit. Aenean hendrerit convallis leo, eget facilisis tellus luctus sed. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas tincidunt vehicula sodales. Donec cursus ante tortor, quis convallis tortor commodo vitae. Duis pulvinar nibh purus, ac auctor dolor lacinia quis. Cras dictum, felis
sit amet dictum dapibus, ex sem vulputate justo, in porttitor quam est eget odio. Aenean tempus aliquam mi, in iaculis quam ornare sit amet. Morbi sed turpis eleifend, euismod risus ut, laoreet lorem. Aenean lorem lectus, ullamcorper quis nisl sit
amet, maximus facilisis mauris. Aenean nec maximus quam. Mauris risus felis, sodales et metus non, sodales faucibus ex. Aenean laoreet, ligula quis maximus volutpat, nisi nulla fringilla ipsum, accumsan vulputate turpis augue volutpat risus. Vivamus
posuere tortor vel efficitur iaculis. Aliquam erat volutpat. Fusce consequat sollicitudin faucibus. Quisque rhoncus vel quam eget pulvinar. Aliquam erat volutpat. Nulla sed tempus sapien, sit amet imperdiet erat. Pellentesque tincidunt sodales ligula,
quis scelerisque tellus ultrices at. In euismod ac diam id dictum. Aenean pulvinar massa sit amet congue fringilla. Nulla eget placerat neque. Quisque hendrerit urna quis justo pharetra, vitae finibus nunc tincidunt. Cras iaculis sapien a metus aliquet
ornare. Nulla eget dolor neque. Nullam tristique lacus mauris, at hendrerit velit sagittis id. In hac habitasse platea dictumst. Quisque ut velit quis lectus pretium ullamcorper a in elit. Nullam vitae semper mauris. Sed interdum, augue sed viverra
vestibulum, diam lorem elementum metus, vulputate consectetur nisl ex vel arcu. Mauris interdum lectus ac magna eleifend aliquet. Mauris auctor viverra nisl id convallis. Pellentesque ut eros tellus. Morbi euismod risus vel urna eleifend, id sagittis
leo finibus. Suspendisse aliquam odio et ultricies rhoncus. Donec vestibulum arcu ac dictum ullamcorper. Sed finibus sit amet metus vel accumsan. Nam luctus risus sed est pulvinar, vel faucibus dolor scelerisque. Etiam ac dui scelerisque, elementum
ligula et, volutpat ante. Phasellus interdum lorem nisl, vel malesuada velit facilisis vel. Quisque risus nunc, posuere vulputate dolor sed, suscipit suscipit mi. Fusce a eleifend augue, quis rhoncus metus. Phasellus quis ornare dolor. Pellentesque
quis arcu finibus, ornare ipsum sed, fermentum sem. Suspendisse eget pulvinar dolor. Fusce tempor vestibulum quam, id pretium magna aliquet quis. Donec vel risus ut nulla egestas luctus. Cras quis nisl at mauris consequat ullamcorper fringilla ut
nunc. Integer commodo feugiat tellus sit amet efficitur. In ex nisl, dapibus eleifend hendrerit mollis, mattis eu libero. Nullam a feugiat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac imperdiet lorem. Phasellus eu faucibus
odio, id convallis diam. Integer eleifend augue facilisis, tincidunt mi sed, accumsan enim. In ultricies neque eget urna mollis suscipit. Etiam justo tortor, blandit ac tortor in, euismod euismod sem. Sed odio metus, consequat fermentum placerat sit
amet, hendrerit at tellus. Duis congue vulputate sapien ut fermentum. Morbi maximus justo eu pellentesque porta. Cras maximus in mauris id semper. Etiam nec enim a leo ullamcorper scelerisque. Aliquam erat volutpat. Curabitur augue dui, dapibus eget
egestas quis, tristique at nisl. Morbi sit amet metus imperdiet, aliquet felis malesuada, commodo justo. Nulla vitae urna eleifend, ullamcorper purus convallis, auctor tellus. Donec malesuada, lectus sed cursus consectetur, quam ante pulvinar est,
sed faucibus nisi turpis vel massa. Vivamus euismod enim leo, eget maximus est convallis eu. Nam gravida mi ac laoreet consectetur. Integer sed dui sagittis magna sodales blandit.
</div>
</div>
I have a flexbox A with 100vh height.
This flexbox contains a child flexbox B.
Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
My real code is more complex (vuejs components). Is there a way to fix this code ?
Update your code like below:
body {
margin: 0;
}
.parent {
height: 100vh;
display: flex;
flex-direction: column;
}
.child1,
.child21 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child2 {
min-height: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child21 {
background: green;
}
.child22 {
overflow: auto;
}
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra viverra, orci
dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus. Nunc facilisis
orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum, non luctus sapien
vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed lobortis arcu sit
amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est. Nulla in nulla sagittis,
ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat risus volutpat eu. Nulla
pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
just add a height to your div with .child22 class as followed:
Learn more about overflow
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
height:50px;
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}