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%;
}
Related
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>
I wondering if it possible, using CSS, to color a specific area on the scrollbar.
I know that the browser (Chrome in my case) doing it when you search for a query (Control+f) on a document. It looks like this:
Is this possible to add yellow lines like this on a requested position?
Thanks!
Very interesting question. I came up with this solution of literally placing a highlight div over the scroll bar. Let me know if this is something that works for you:
.container{
display: inline-flex;
position: relative;
}
.content {
width: 500px;
height: 600px;
overflow: auto;
}
.highlight {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 100px;
z-index: 10;
}
.highlight1 {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 200px;
z-index: 10;
}
.highlight2 {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 250px;
z-index: 10;
}
<div class="container">
<div class="highlight"></div>
<div class="highlight1"></div>
<div class="highlight2"></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Diam maecenas sed enim ut sem. Proin nibh nisl condimentum id. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Vestibulum lectus mauris ultrices eros in cursus. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Luctus accumsan tortor posuere ac ut consequat semper. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Duis ultricies lacus sed turpis tincidunt id aliquet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Id aliquet risus feugiat in ante metus. Vitae tempus quam pellentesque nec. Ullamcorper dignissim cras tincidunt lobortis feugiat. Nunc congue nisi vitae suscipit tellus. Semper risus in hendrerit gravida rutrum quisque. Turpis egestas pretium aenean pharetra magna ac. In arcu cursus euismod quis viverra.
Varius quam quisque id diam vel quam elementum pulvinar. Nulla malesuada pellentesque elit eget. Lobortis mattis aliquam faucibus purus in. Sed pulvinar proin gravida hendrerit. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Cursus euismod quis viverra nibh. Ipsum a arcu cursus vitae. Lacus vestibulum sed arcu non odio euismod lacinia at. Et tortor at risus viverra adipiscing. Faucibus purus in massa tempor nec. Non consectetur a erat nam at lectus urna duis. Hac habitasse platea dictumst quisque. Id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris cursus mattis molestie a iaculis at. In mollis nunc sed id semper risus. Dui sapien eget mi proin sed libero. At volutpat diam ut venenatis. Justo eget magna fermentum iaculis eu. Orci porta non pulvinar neque laoreet suspendisse. Ultricies leo integer malesuada nunc vel.
Elit ut aliquam purus sit amet luctus venenatis lectus. Turpis egestas sed tempus urna et pharetra pharetra massa. Eget dolor morbi non arcu. Nisl purus in mollis nunc sed id semper risus in. Pellentesque habitant morbi tristique senectus et netus. In hac habitasse platea dictumst vestibulum. Pellentesque nec nam aliquam sem et. Eros donec ac odio tempor orci dapibus ultrices. Ut enim blandit volutpat maecenas volutpat blandit. Parturient montes nascetur ridiculus mus mauris vitae. Rhoncus mattis rhoncus urna neque viverra justo nec.
Sed turpis tincidunt id aliquet risus feugiat in ante metus. Pulvinar mattis nunc sed blandit libero volutpat. Tortor at risus viverra adipiscing. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Tortor at risus viverra adipiscing at in tellus integer feugiat. Felis donec et odio pellentesque diam volutpat commodo sed. Curabitur vitae nunc sed velit dignissim. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Pretium nibh ipsum consequat nisl vel pretium lectus. In fermentum et sollicitudin ac orci. Arcu odio ut sem nulla pharetra diam sit. Velit scelerisque in dictum non consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Arcu non sodales neque sodales ut etiam sit amet nisl. Risus nullam eget felis eget nunc. Nibh sit amet commodo nulla facilisi nullam. Maecenas accumsan lacus vel facilisis volutpat est velit. Sem nulla pharetra diam sit amet nisl. Praesent elementum facilisis leo vel fringilla est ullamcorper.
Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Maecenas ultricies mi eget mauris. Gravida cum sociis natoque penatibus. At risus viverra adipiscing at in. Sed arcu non odio euismod lacinia at quis. Sed viverra tellus in hac habitasse. Donec pretium vulputate sapien nec sagittis. Ornare quam viverra orci sagittis eu volutpat. Amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit. Sagittis purus sit amet volutpat.
Sem et tortor consequat id porta nibh venenatis cras sed. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio ut enim blandit volutpat. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit. Mi eget mauris pharetra et ultrices neque ornare aenean. Est sit amet facilisis magna etiam tempor. Tortor at auctor urna nunc. Vitae elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut. Urna nunc id cursus metus aliquam eleifend mi in. Amet justo donec enim diam vulputate ut. Habitant morbi tristique senectus et. Sed risus ultricies tristique nulla aliquet. Quis ipsum suspendisse ultrices gravida dictum. Sed augue lacus viverra vitae congue eu. Nec dui nunc mattis enim ut tellus. Sit amet purus gravida quis blandit turpis cursus in. Amet consectetur adipiscing elit duis tristique sollicitudin.
</div>
</div>
I have an issue with position: sticky used in an absolute positioned container with flexible height. For vertically aligning the element I use
top: 50%;
transform: translateY(-50%);
One child of the sticky element is a button, and it's hitbox seems to be where the element was before the transform was applied (so beneath the actual element).
The problem only appears on Microsoft Edge (EdgeHTML version 16). Is this a (known) bug? Is it expected behavior? Am I doing something wrong?
Below is a snippet that shows the problem using css hover effects on the borders of the elements (you should see the border color changing if you hover slightly beneath the box)
.body {
max-height: 600px;
overflow: auto;
}
.container {
width: 500px;
border: 1px dotted blue;
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.item {
border: 2px solid red;
position: sticky;
top: 50%;
transform: translateY(-50%);
background: white;
}
.item:hover {
border: 2px solid green;
}
.button {
border: 1px solid pink;
}
.button:hover {
border: 1px solid turquoise;
}
<div class='body'>
<div class='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna vel risus interdum sollicitudin et ut magna. Pellentesque enim magna, consequat non pellentesque ut, posuere maximus diam. Suspendisse potenti. Curabitur congue et orci nec fermentum.
Donec in justo ut sem fringilla pellentesque ut a erat. Fusce pharetra metus vel mauris vestibulum fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec aliquam odio, id elementum purus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pharetra convallis aliquet. Aenean vitae venenatis tortor, consequat rhoncus velit. Morbi sit amet blandit purus. Curabitur in sagittis orci. Nam
dictum vitae turpis eget lobortis. In venenatis a purus sed lacinia. Nulla eget sem id lectus suscipit commodo. Praesent laoreet neque ut leo porttitor scelerisque. Cras a massa vel justo pellentesque gravida. Suspendisse diam est, vehicula eu mollis
quis, pellentesque ut quam. Vivamus aliquam elementum diam, sit amet hendrerit arcu dapibus ut. Maecenas sodales mollis augue. Duis fringilla lobortis condimentum. Aliquam eu nisl a enim efficitur egestas. Mauris vel vestibulum mauris. Proin ut
quam et augue consectetur posuere. Aliquam finibus, elit ac accumsan mollis, sem est facilisis ex, et finibus enim enim malesuada sem. Sed sit amet imperdiet dolor. Donec sagittis rutrum molestie. Donec orci mauris, congue eget sapien vitae, efficitur
posuere est. Suspendisse auctor nibh turpis, at laoreet enim pretium in. Vivamus fermentum tristique mauris, eu rhoncus nulla maximus sit amet. Mauris iaculis odio ac laoreet condimentum. Praesent at neque eget mauris efficitur vestibulum. Integer
massa justo, sodales non ultricies non, eleifend quis libero. Ut non pulvinar ipsum, pulvinar placerat mauris. Suspendisse cursus faucibus urna, et interdum libero pharetra id. Cras et vulputate lacus. Aenean mollis purus in tellus porta, et pretium
felis suscipit. Integer tempus, velit condimentum tincidunt commodo, felis nisi semper ex, vel condimentum nulla tellus eu sem. Etiam tincidunt nunc auctor mi rutrum, at tempor libero eleifend. Aliquam mi neque, cursus nec feugiat non, aliquet sed
nisi. Pellentesque ultrices ipsum eget commodo sollicitudin. Mauris eu posuere quam. Donec id metus vulputate, maximus tellus at, posuere eros. Etiam elementum sapien quis ligula lobortis maximus. Curabitur eros sem, ultricies vel metus a, imperdiet
ultricies purus. Aliquam eget condimentum magna. Donec augue nibh, tempus id lorem in, pharetra pellentesque ligula. Pellentesque aliquam lorem non ex sollicitudin tempus quis at tortor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Phasellus dapibus efficitur mattis. Nam finibus libero nec vestibulum malesuada. Maecenas at erat eros. Donec viverra, urna at lacinia ullamcorper, nisl lacus tincidunt risus, sed varius sapien felis non justo.
Proin dui erat, viverra vitae augue eget, ornare consequat ex. Phasellus non aliquam lorem. Nunc ut consequat justo, a rhoncus ligula. Nulla nec malesuada turpis, sed maximus turpis. Suspendisse iaculis eget orci ut venenatis. In in scelerisque
risus, quis porttitor mi. Phasellus ac erat sit amet ex convallis condimentum vel vel nibh. Vivamus volutpat nisl ac sollicitudin ullamcorper. Nunc facilisis, lacus consectetur bibendum cursus, orci massa congue ante, id consectetur justo est vitae
ex. Donec tristique diam sit amet posuere facilisis. Nulla convallis rhoncus augue. Praesent rhoncus quis lectus sed laoreet. Phasellus volutpat ex vel diam egestas, at sagittis diam tempus. Mauris rutrum ex sit amet lacus maximus, et sollicitudin
tortor fermentum. Suspendisse potenti. Nam posuere ante et erat tincidunt, a ultricies odio elementum. In eget mi ut lorem tincidunt molestie. Maecenas accumsan massa a est imperdiet, in placerat velit lacinia. In tortor mi, commodo et justo a,
imperdiet viverra leo. Mauris non neque vitae risus rhoncus pellentesque. Aliquam vel urna sit amet augue congue interdum. Mauris ut auctor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eget lectus
nec felis dapibus scelerisque et ac orci. Suspendisse eget sem consectetur, fringilla sapien ac, placerat ante. Praesent eu neque ac dui sollicitudin rhoncus. Suspendisse potenti. Nunc varius massa quis dapibus pulvinar. Curabitur molestie faucibus
semper. Cras posuere ut mauris ac pellentesque. Duis quis augue eget nunc condimentum aliquet. Pellentesque suscipit turpis non eros congue, a luctus leo scelerisque. Praesent accumsan odio quis dui iaculis dapibus. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Nam suscipit tellus eu nibh vehicula, quis venenatis leo fermentum. Praesent ornare tellus a metus accumsan dignissim. Donec luctus orci quis fermentum malesuada. Suspendisse malesuada leo
nisl, non placerat augue venenatis eu. Ut dapibus sapien eget orci tempor, et consectetur tellus molestie. Vestibulum non arcu vitae leo ultrices dignissim. Aenean sodales est sit amet porta rhoncus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque fermentum tellus non purus consectetur, eu rutrum tortor mollis. Cras sollicitudin, erat vel blandit tempor, lectus urna fermentum sem, nec porta turpis sem nec turpis. Cras arcu enim,
viverra id eleifend quis, convallis id tortor. Vestibulum porta velit purus, in sollicitudin dui sodales vel. Quisque quis blandit ex. In in finibus massa. Donec nec mattis dui. Nulla ac dui lobortis, facilisis leo in, efficitur ipsum. Morbi eleifend
sollicitudin lorem et porta. Nulla lobortis nec ipsum posuere accumsan. Curabitur a posuere libero.
</div>
<div class='wrapper'>
<div class='item'>
Hello
<div class='button'>
Click me
</div>
</div>
</div>
</div>
</div>
I am trying to design a simple dashboard page.
I started with putting together two divs side by side to be used as side menu and content. The page looks like the following:
I noticed something that the scrollbar(y) isn't visible even though the page has more content than what is visible.
Yes you still can scroll down/up but it is confusing why there is no scrollbar visible.
I am trying to use bootstrap 4, but I also have a custom css.
What do you think the issue? And more importantly, is there a better way using bootstrap 4?
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
This would be a simpler, Bootstrap friendly method...
https://www.codeply.com/go/y4HsWA8VA2
<div class="container-fluid">
<div class="row">
<div class="sidebar col">Sidebar</div>
<div class="main col">
..
</div>
</div>
</div>
.sidebar {
width: 250px;
min-height: 100vh;
position: fixed;
}
.main {
padding-left: 265px;
}
scroll is not visible because you are giving width 100% of body and also pushing div 250px right side and also giving padding to right 250px;
so mainly content is overflowing to right side.
you have to do like
#mainContents {
height: 100%;
width: 100%;
padding-left: 250px;
position: fixed;
z-index: -1;
top: 0px;
background-color: #ECF0F5;
overflow-x: hidden;
overflow-y: auto;
transition: 0.3s;
}
It will solve your Problem
Remove the following from #mainContents style
width: 100%;
padding-right: 250px;
Then your style will be like this
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
Code of whole page ia as follows. Please check it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
use this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody" style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
you need to add css in div tag style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"
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);
}