CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Messi Adrinho
Messi Adrinho

Reputation: 95

disable scrolling on webpage and allow it only on page sections

I'm working onepage website, what i'm trying to do is to disable scorlling on webpage and only and make transitions between sections using the navbar links to id. for that i have use this jquery code

$(document).ready(function() {
    $('.js-scrollTo').on('click', function() { 
        var page = $(this).attr('href'); 
        var speed = 1000;
        $('html, body').animate( { scrollTop: $(page).offset().top }, speed );
        return false;
    });
});

and this on CSS

html, body {margin: 0; height: 100%; overflow: hidden}

everything work fine except one issue is that when im in a specific section that have a big content i can't scroll within in, what im trying to figure out is: how to enable scrolling within section itself without scrolling all the webpage

Upvotes: 0

Views: 884

Answers (2)

Anmol Mittal
Anmol Mittal

Reputation: 853

You can add css to your div :- 

yourDiv:hover { overflow: auto; height:desired height }

Upvotes: 1

Ryan Fitzgerald
Ryan Fitzgerald

Reputation: 423

If I've understood your question correctly, what you can do in this case is add an overflow-y:scroll to the wrapping div of the content you wish to be scrollable.

For example, say we have a div#test with some content:

<div id="test">
   ... Some content
</div>

We can then simply apply the styles:

#test {
  height: 300px;
  width: 300px;
  overflow-y: scroll;
  background: #ff1000;
}

Here is it in action: http://codepen.io/anon/pen/RRYERR

Upvotes: 1

Related Questions