Struggling to reveal the main page scrollbar upon hover? While working on my portfolio, I hid the page scrollbar. Trying to display the scrollbar when hovering over the main container.
Below is a link to my portfolio page and corresponding code. Any assistance in pure CSS would be greatly appreciated!
Please note that I prefer a solution in pure CSS, without involving JS or jQuery.
::-webkit-scrollbar
display: none;
width: 15px
background-color: #fff
::-webkit-scrollbar-thumb
display: none;
.main-div:hover ::-webkit-scrollbar
display: inline;
.main-div:hover ::-webkit-scrollbar-thumb
display: inline;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Main Section Starts -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-sm-12 col-12">
<aside>
<div class="personal-info wow animated fadeInLeft">
[Content of personal info section]
</div>
</aside>
</div>
<div class="col-md-12 col-lg-8 col-sm-12 col-12">
<div class="main-div">
<!-- Slider Content Goes Here -->
</div>
</div>
</div>
</section>
</body>
</html>Portfolio Link: Visit Portfolio
I received answers related to individual divs or sections, not addressing the entire page structure. View Relevant Discussion