Messi Adrinho Messi Adrinho - 1 year ago 68
CSS Question

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

Answer Source

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

We can then simply apply the styles:

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

Here is it in action:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download