Как изменить вертикальные полосы прокрутки на горизонтальном сайте

Question

Что происходит сейчас

Я создал одностраничный сайт горизонтальной прокрутки , который показывает один раздел за раз.Каждый раздел имеет разное количество контента и разную высоту.В настоящее время вертикальная полоса прокрутки предназначена для самого длинного раздела сайта.Что вполне ожидаемо.

Что я пытаюсь сделать

Я хочу, чтобы вертикальные полосы прокрутки были относительно текущего видимого раздела.Таким образом, не будет чрезмерной вертикальной прокрутки на коротком участке.Я надеюсь, что это имеет смысл, я видел это раньше, но не могу найти пример в Интернете.

То, что я пробовал, но не сработало

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

Это сработало для меня. Я уверен, что есть лучший способ, но сейчас это сделано! По сути, я создал объект, который хранит хэш и высоту каждого раздела, а затем ссылается на них, чтобы изменить размер каждого раздела на высоту активного раздела. Примечательно, что когда я сбрасывал высоту секций, мне также приходилось снова устанавливать ширину.

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

Answer 2

Я думаю, вам придется изменить CSS для элементов, которые не находятся в текущем фрейме просмотра, чтобы отображать: нет.лучшим вариантом было бы заключить их в элемент div, который имеет

 overflow-y: scroll

, а высота этого элемента будет равна вашей максимальной высоте.Затем, когда они переместились в фокус, вы можете изменить свойства CSS по мере необходимости, чтобы они отображались нормально.