Cross-browser Vertical Scrollbar

I have the following lines of code in my website – example/demo.

body {
  background: #dfdfdf; 
  font: 12px Arial, Helvetica, sans-serif;
}

.reading {
	background-color: rgba(255, 255, 255, 1); 
	color: #000; 
	padding: 10px; 
	border-radius: 3px; 
	margin: 0 auto 15px; 
	width: 95%;
	height: 84px; 
	overflow: auto;
}

.reading::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.reading::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.reading p:last-of-type {margin-bottom: 0;}
<div class="reading">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, nulla eget ultrices sollicitudin, dolor sem tincidunt eros, in accumsan ipsum lacus eu enim. In sagittis nunc vel aliquet tincidunt. Proin in lectus ipsum. Nunc lectus ligula, gravida id neque eget, condimentum ultricies tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sollicitudin ullamcorper venenatis. Nulla malesuada, nisl eget imperdiet finibus, dolor ante volutpat tortor, sed mattis nisi enim in mi.</p>

<p>Vestibulum iaculis eros eu suscipit bibendum. Donec at accumsan massa. Suspendisse ac vehicula lectus, et feugiat sapien. Phasellus vel varius lorem, quis euismod mi. In in efficitur leo. Nullam porta eros ante, elementum convallis dui lacinia in. Praesent eget lacinia ipsum, id lacinia elit.</p>

<p>Cras at condimentum purus. In sodales vel nunc quis elementum. Phasellus quis metus libero. Proin sodales vitae velit a ultricies. Aenean tristique, neque nec egestas molestie, enim mi aliquam erat, non tincidunt nisi urna scelerisque ligula. In consectetur fermentum lectus eu malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id dignissim nisl. Nam dolor ante, elementum non convallis nec, lacinia quis est. Morbi condimentum mi eu sem pulvinar, placerat malesuada dui volutpat. Etiam hendrerit turpis ac risus ornare, at elementum sapien semper. Nam ultrices tellus ac semper scelerisque. Fusce at molestie nibh. In dictum nisl placerat, mollis diam sit amet, lacinia nunc.</p>
</div>

How can I make it so that the vertical scrollbar is always visible in Mozilla Firefox, as it is in Google Chrome, Apple Safari and Opera?

I’m not too sure whether this is just a Mac problem either, or if the same appears on a PC.

Mac – Google Chrome:

enter image description here

Mac – Mozilla Firefox:

enter image description here


Source: css3

Leave a Reply