Jump to content

Smooth scroll not working with 100% height Div


impressDesign
 Share

Recommended Posts

Hi,

 

I was wondering if anyone out there knows a work around for getting the JQuery smoothScroll script (or any other smooth scroll script) to work when you have your first div to display full screen?.

 

The script I use works perfectly normally but this is the first time I've used it on a page with the opening div set to be full screen. Ive done a bit of research and it seems its either the div that is set to 100% height or the body with an overflow set to hidden thats the problem. ...or both. I think I understand that with these settings the browser thinks there is nothing to scroll to so the script doesn't trigger - is that right?

 

I can't write JavaScript so I was wondering if there is a CSS work around for this to get it working...?

 

The page I have at the moment has a div that opens full page with a wowSlider background. I took this code from the wowslider site so not sure if there is a better way to do it or not??

 

CSS:

 

body {

overflow: hidden;
margin:0px;
padding:0px;
text-align:center;
font-family: 'Montserrat', sans-serif;
color:#000;
}
#wowslider-container1 {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
z-index: 1;
}
.full-wrapper {
width: 100%;
min-height: 100%;
}
HTML
<div id="wowslider-container1"> - the background slider
</div>
<div class="content"> - wraps all the content that goes over the slider
<div class="full-wrapper"> - the first div that is set to full screen
</div>
<div class="normalDiv"> - normal divs there after
</div>
<div class="normalDiv">
</div>
</div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...