JQuery - Fancybox: Но я не хочу прокрутки!

Я использую jQuery Fancybox для всплывающей регистрационной формы здесь

Я бы хотел, чтобы форма появилась с размером 450 пикселей на 700 пикселей, но независимо от того, что я задал высоту и ширину, я получаю полосы прокрутки:

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

24 ответа

Изменить строку 197 и 198 в jquery.fancybox.css:

.fancybox-lock .fancybox-overlay {
 overflow: auto;
 overflow-y: auto;
}


Я сделал это, чтобы избавиться от переполнения (полоса прокрутки)...

к концу jquery.fancybox.... js файла есть функции onStart, onCancel, onComplete и т.д., и все они пустые... так что просто продолжайте и заполните фигурные скобки onStart с помощью "$('body'). css ('overflow', 'hidden')" и onClosed "$('body'). css ('overflow', 'visible')"... должно выглядеть так...

onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},

мир


Вот еще одна мысль. У меня был

html { overflow-y: scroll; }

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


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

if (type === 'iframe' && isTouch) {
 coming.scrolling = 'scroll';
}

Это, по-видимому, отменяет любые параметры, заданные начальной конфигурацией fancybox, и может быть изменена только после выполнения этих строк кода, т.е. изменения css с помощью метода afterShow. Тем не менее, все такие методы вызовут заметную задержку/задержку, и вы сможете увидеть, как полосы прокрутки исчезают при ее открытии.

Я предположил, что вы удаляете эти строки из основного исходного файла jquery.fancybox.js по строке 880, потому что я не вижу причины принудительно использовать полосы прокрутки на устройствах с сенсорными экранами.

Обратите внимание, что это не приведет к тому, что полосы прокрутки исчезнут, а просто перестанет переопределять параметр конфигурации scrolling. Поэтому вы должны добавить scrolling: 'no' в свою первоначальную конфигурацию fancybox.


Другой альтернативой является изменение overflow:

body {
 overflow: hidden;
}

в вашем iframe HTML.


Звучит немного странно. уродливым решением является использование css, overflow: hidden;

Всякий раз, когда я использую fancybox, полосы прокрутки работают правильно. что контент oc fancybox не устанавливает другую высоту?

Изменить: Просмотрел ваш примерный сайт. Похоже, что в содержимом, которое больше, чем сам fancybox, есть определенная ширина.


У меня была та же проблема с fancybox и iframe, googled для решения и закончилась здесь. Переполнение: скрытый не работал у меня, однако я обнаружил, что fancybox позволяет вам установить опцию прокрутки iframe (эквивалентно установке атрибута "прокрутка = нет" в iframe), что устраняет проблему в IE7 в более изящный способ:

$.fancybox({
 'type' : 'iframe',
 'scrolling' : 'no',
... and the rest of the parameters.


Я немного потрудился с этим, только чтобы найти ответ в документации Fancybox.

Как было намечено выше, сначала я подумал, что было бы так просто, как отключить прокрутку:

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

Просто установить параметр "прокрутки" на "нет" было недостаточно. Я должен был повторить то же самое в опции "iframe", например:

$('.fancybox').fancybox({
 'type': 'iframe', 
 'scrolling': 'no', 
 'width': 500, 
 'iframe': {'scrolling': 'no'}
})


Просто хотел сказать, что ответ Магнуса выше сделал это для меня, но для второго "наложения", который должен быть "переполнен"

helpers : {
 overlay : {
 css : { 'overflow' : 'hidden' }
 }
}


после тестирования каждого из приведенных выше советов (и все еще имеющих бесполезные полосы прокрутки, вызванные некоторыми встроенными overflow: scroll в .fancybox-inner), а также пробую много других собственных обходных решений, я избавился от полос прокрутки с помощью этого решения:

afterShow: function(){
 this.inner.css({
 overflow: 'auto' // or 'no'
 });
 }


У меня одна и та же проблема, и после проб и ошибок я обнаружил, что вы можете избежать полос прокрутки, переопределяя класс фрейма css.

Вы можете сделать следующее:

iframe.fancybox-iframe {
 overflow:hidden;
}

Конфигурация JS:

jQuery(document).ready(function(){
 $("a.various").fancybox({
 'width' : 'auto',
 'height' : 'auto',
 'autoScale' : false,
 'autoDimensions' : false,
 'scrolling' : 'no',
 'transitionIn' : 'none',
 'transitionOut' : 'none',
 'type' : 'iframe' 
 }); 
});

Примечание. Тип вашего fancybox должен быть iframe, чтобы он вступил в силу.


У меня была аналогичная проблема, когда появлялись вертикальные полосы прокрутки, когда я устанавливал maxWidth в параметрах Fancybox.

Чтобы обойти проблему, мне пришлось установить

.fancybox-inner {
 overflow: hidden !important;
}

и установите правило CSS с фиксированной шириной в контенте Fancybox вместо указания maxWidth в параметрах Fancybox. Если бы я сделал последний, Fancybox рассчитал высоту для контента, был немного слишком мал - вероятно, намекая на то, почему он вставлял в полосу прокрутки в первую очередь.


Вам нужно поместить опцию iframe в свой собственный контекст, например:

$(".someclass").fancybox({
 type : 'iframe',
 iframe : {
 scrolling : 'no'
 }
});


Я считаю, что решение этого - установить

'autoDimensions' : false

тогда ширина и высота для встроенного контента будут такими, какими вы установите его как


Я знаю, это звучит немного странно, но кто-то из вас попытался установить тег margin тега тела страницы формы на 0.

Проблема на самом деле довольно проста, причина в том, что тег body margin по умолчанию установлен в 8px (в зависимости от браузера), и если вы просто установите его на 0, то он фиксирует полосу прокрутки.

Конфигурация js у меня такова, и она хорошо работает, не меняя css fancybox.

$(".iframe").fancybox({
 'autoScale' : false,
 'autoDimensions' : false,
 'transitionIn' : 'none',
 'transitionOut' : 'none',
 'type' : 'iframe'
});


Добавить iframe: {прокрутка: 'нет'} в качестве опции

Пример

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});


Используя версию fancybox: 2.1.5 и попробовав все варианты, предлагаемые здесь, и никто из них не работал, показывая полосу прокрутки.

$('.foo').click(function(e){ 
 $.fancybox({
 href: $(this).data('href'),
 type: 'iframe',
 scrolling: 'no',
 iframe : {
 scrolling : 'no'
 }
 });
 e.preventDefault();
});

Так же была некоторая отладка кода до тех пор, пока я не нашел это, поэтому он перезаписывает все параметры, которые я задал, и не переписывать это, используя множество опций.

if (type === 'iframe' && isTouch) {
 coming.scrolling = 'scroll';
}

В конце концов, решения заключались в использовании CSS! important hack.

.fancybox-inner {
 overflow: hidden !important;
}

Строка ответственного кода:

current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

Fancybox раньше был надежным рабочим решением, и я не нахожу ничего, кроме несоответствий. На самом деле обсуждать вопрос о понижении уже сейчас, даже после приобретения лицензии разработчиков. Больше информации здесь, если вы не понимаете, что вам нужен один для коммерческого проекта: qaru.site/questions/232051/...


Fancybox 2.x по крайней мере имеет "вспомогательный помощник", который оказался для меня ключом. Я добавил следующие параметры конфигурации fancybox:

helpers : {
 overlay : {
 css : { 'overlay' : 'hidden' }
 }
}

Я попытался установить это в CSS, но это не сработало, и в конце игры, например, в событии beforeShow, но это привело к мерцающей полосе. Это, кажется, работает без заминок.


Снимите кавычки вокруг значений высоты и ширины:


У меня была одна и та же проблема. Это были не те свойства fancybox или CSS, а основной css для моего сайта.

если у вас есть что-то вроде

div {overflow:auto;height:auto;}

для наследуемого /root на вашем сайте css, тогда это вызовет проблемы с полосой прокрутки в причудливом поле. Удалите и сделайте свой HTML и CSS более точными с идентификаторами и классами


$(".various").fancybox({
 fitToView : false,
 width : '100%',
 height : '100%',
 maxWidth : 850,
 maxHeight : 550, 
 fitToView : false,
 padding : 20,
 autoSize : true,
 closeClick : true,
 openEffect : 'none',
 closeEffect : 'none',
 overflow : 'hidden', 
 scrolling : 'no'
});


Это единственное, что сработало для меня как для IE, так и для Google Chrome. Я думаю, что это в основном из-за материала .body.scrollHeight, который лучше всего работает в IE. Я помещаю +30 для Firefox...

jQuery.fancybox({
 href: href,
 type: "iframe",
 centerOnScroll: 'true',
 scrolling: 'no',
 width: 650,
 'onComplete': function() {
 jQuery('#fancybox-frame').load(function() {
 jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
 });
 }
});


на jquery.fancybox.js, я отредактировал эту часть:

iframe : {
 scrolling : 'no', // i changed this from 'auto' to 'no'
 preload : true
},


Мои 2 цента, напишите

*{ margin:0; padding:0; }

на главной странице целевой страницы, добавьте содержимое div с размером высоты всех ваших элементов, не трогайте .js, listo, saludos

licensed under cc by-sa 3.0 with attribution.