Hi everyone! I have a question! I am trying to create an search overlay but I have a problem! When open you can see the vertical scrollbar of the page and still scroll the page, how can I hide the scrollbar and prevent someone of scrolling the page when the search overlay is active… I am trying to find a solution a long time like overflow: hidden …
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Open sans Webfont -->
<link href='https://fonts.googleapis.com/css?family=Open sans:300' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
/* Basic Style */
body{
font-size: 16px;
font-family: Open sans;
font-weight: 400;
}
a1{
color: #000;
text-decoration: none;
border: 0px solid #FC2121;
border-radius: 20px;
padding: 6px 8px;
line-height: 3;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a1:hover{
color: #FFF;
background: red;
border-radius: 20px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
/* Search Style */
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
display:none;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 106;
display: block;
overflow: hidden;
}
#search input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 60%;
margin-left: 20%;
color: rgb(255, 255, 255);
background: transparent;
border-top: 0px solid rgba(255, 255, 255, .8);
border-bottom: 2px solid rgba(255, 255, 255, .5);
border-left: 0px solid transparent;
border-right: 0px solid transparent;
font-size: 16px;
font-weight: 300;
text-align: left;
outline: none;
padding: 10px;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
opacity: 1;
font-size: 37px;
color: #fff;
}
#search .close:hover{
color: #FC2121;
cursor: pointer;
}
.lock-scroll {
overflow: hidden;
}
</style>
</head>
<body>
<!-- Search Link -->
<a1 href="#search">
<i class="fa fa-search"></i>
</a1>
<!-- Search Form -->
<div id="search">
<span class="close">X</span>
<form role="search" id="searchform" action="/siq_searchForm" method="get">
<input value="" name="s" type="search" placeholder="Digite aqui para pesquisar..."/>
</form>
</div>
<script>
$(document).ready(function(){
$('a1[href="#search"]').on('click', function(event) {
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
(function () {
window.siqConfig = {
engineKey: "ce15c8cf19ebdb906a6b4c14508324f1"
};
window.siqConfig.baseUrl = "//pub.searchiq.co/";
var script = document.createElement("SCRIPT");
script.src = window.siqConfig.baseUrl + '/js/container/siq-container-2.js?cb=' + (Math.floor(Math.random()*999999)) + '&engineKey=' + siqConfig.engineKey;
script.id = "siq-container";
document.getElementsByTagName("HEAD")[0].appendChild(script);
})();
</script>
<script>
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
$('html').addClass('noscroll').css('top',-scrollTop);
}
</script>
<script>
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);
</script>
</body>
</html>