Аккордеон отскакивает влево при нажатии

63
4

jQuery аккордеон отскакивает влево при загрузке содержимого iframe. Я в тупике.

Какие-либо предложения?

Я предполагаю, что это что-то с кодом измерения iframe.

$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});

Аккордеон в jsFiddle

спросил(а) 2021-01-25T18:16:06+03:00 4 месяца, 4 недели назад
1
Решение
63

Не очень круто, но вы можете легко попробовать некоторые работы, как это:

$(function(){ $('.ui-accordion-header').on('click',function(){
if($(this).hasClass('ui-state-active')){
$('body').css('overflow','hidden');
}else{
setTimeout(function(){
$('body').css('overflow','auto');
},600);
}
});
});

рабочий пример здесь

ответил(а) 2021-01-25T18:16:06+03:00 4 месяца, 4 недели назад
45

Откат - это обычное поведение браузера при появлении полосы прокрутки. В старых браузерах, таких как IE 7 (я думаю), полоса прокрутки всегда была видимой, просто отключена, когда она не нужна. Так что никакого отскока не произойдет.

Настройка переполнения

Вы все еще можете достичь этого и использовать свойство overflow чтобы всегда отображалась полоса прокрутки, даже если это не было необходимо.

Как и в старых браузерах, он отключает полосу прокрутки, когда она не нужна, и позволяет ее, когда это необходимо. Следовательно, никакого отскока.

Следующий CSS будет делать это:

body {
overflow-y: scroll;
}

DEMO 1 - всегда показывать полосу прокрутки

Регулировка высоты

Другой альтернативой было бы сделать документ немного выше 100%, поэтому у вас также всегда есть полоса прокрутки, но она всегда включена.

Вы можете добавить для него следующий CSS:

html {
height: 101%;
}

DEMO 2 - Использование большого документа HTML

DEMO 1, по-видимому, является более стандартным подходом, поскольку он больше похож на браузеры, которые раньше смотрелись, а скрытая полоса прокрутки не так уж и заметна, когда отключена.

DEMO 2 может быть менее благоприятным, поскольку, в отличие от вышеприведенного варианта, полоса прокрутки, которая никогда не отключается, всегда, кажется, указывает на содержание прокрутки, даже если контент отсутствует.

Использование JavaScript-решения может работать с курсом, но также намного тяжелее и может быть более утомительным для поддержания/обновления.

ответил(а) 2021-01-25T18:16:06+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема