如何更改水平站点中的垂直滚动条

Question

现在正在发生什么

我创建了一个single-page horizontal scrolling site，一次显示一个部分。每个部分都有不同的内容和不同的高度。目前滚动垂直滚动条适用于站点中最长的部分。这是完全可以预料的。

我想做什么

我希望垂直滚动条与当前可见部分相关。因此，短节上不会有过多的垂直滚动。我希望这是有道理的，我以前见过，但无法在网上找到一个例子。

我尝试了什么，但没有用

$("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

我认为您必须更改不在当前视图框架内的元素的css才能显示：none。

修改的

也许更好的选择是将它们包装在具有

的div中

 overflow-y: scroll

并且该div上的高度将是您的最大高度。然后，当他们移动到焦点时，您可以根据需要更改CSS属性以正常显示它。

Answer 2

这最终为我工作。我确信有更好的方法，但现在已经完成了工作！基本上我创建了一个对象，它存储每个部分的散列和高度，然后引用那些将每个部分的大小调整为活动部分的高度。值得注意的是，当我重置部分的高度时，我也必须再次设置宽度。

$("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;');
}