How to change vertical scroll bars in horizontal site

Question

What's happening right now

I've created a single-page horizontal scrolling site that shows a single section at a time. Each section has a different amount of content and different heights. Currently the scroll the vertical scroll bar accommodates for the longest section in the site. Which is totally expected.

What I am trying to do

I want the vertical scroll bars to be relative the current visible section. So there would not be excessive vertical scrolling on a short section. I hope this makes sense, I've seen it before but can't find an example online.

What I've tried, but didn't work

$("ul#nav li a").click(function() {
  $("ul#nav li a").removeClass("active");
  $(this).addClass("active");

  // Get the height of the element and set max-height
  var section_id = $(this).attr("href")
  section_id = $('div' + section_id).height();
  $("body").attr('style', 'height: ' + section_id + 'px !important; max-height: ' + section_id + 'px !important;');
});

Answer 1

I think you'd have to change the css on the elements that are not within the current view frame to be display:none.

edit

Maybe a better choice would be to wrap them in a div that has

 overflow-y: scroll

and the height on that div would be your max height. Then when they moved into focus, you could change the CSS properties as needed to display it normally.

Answer 2

This ended up working for me. I'm sure there's a better way, but this got the job done for now! Basically I created an object that stores each sections hash and height then reference those to resize each section to the height of the active section. Of note it seemed that when I reset the height of the sections I also had to set the width again too.

$("ul#nav li a").click(function() {
    $("ul#nav li a").removeClass("active");
    $(this).addClass("active");

    var section_key = $(this).attr("href")
    changeSectionH(section_key)
});

var sections = {};
$("div.section").each(function(index) {
        var section_id = '#' + $(this).attr("id");
        var section_h = $(section_id).height();
        sections[section_id] = section_h;
});

function changeSectionH(key){
    var windowWidth = $(window).width();
    $("div.section").attr('style', 'height: ' + sections[key] + 'px !important; max-height: ' + sections[key] + 'px !important; width: ' + windowWidth + 'px; overflow-y:hidden;');
}