Я использую jQuery Fancybox для всплывающей регистрационной формы здесь
Я бы хотел, чтобы форма появилась с размером 450 пикселей на 700 пикселей, но независимо от того, что я задал высоту и ширину, я получаю полосы прокрутки:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'height' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Должно быть, я что-то делаю неправильно, но я не могу понять, что это такое. Я был бы признателен за полезную руку здесь. Спасибо.
Звучит немного странно. уродливым решением является использование 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
}});
Снимите кавычки вокруг значений высоты и ширины:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : 450,
'height' : 700,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
У меня была одна и та же проблема. Это были не те свойства fancybox или CSS, а основной css для моего сайта.
если у вас есть что-то вроде
div {overflow:auto;height:auto;}
для наследуемого /root на вашем сайте css, тогда это вызовет проблемы с полосой прокрутки в причудливом поле. Удалите и сделайте свой HTML и CSS более точными с идентификаторами и классами
Fancybox 2.x по крайней мере имеет "вспомогательный помощник", который оказался для меня ключом. Я добавил следующие параметры конфигурации fancybox:
helpers : {
overlay : {
css : { 'overlay' : 'hidden' }
}
}
Я попытался установить это в CSS, но это не сработало, и в конце игры, например, в событии beforeShow, но это привело к мерцающей полосе. Это, кажется, работает без заминок.
на jquery.fancybox.js, я отредактировал эту часть:
iframe : {
scrolling : 'no', // i changed this from 'auto' to 'no'
preload : true
},
$(".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);
});
}
});
Используя версию 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 раньше был надежным рабочим решением, и я не нахожу ничего, кроме несоответствий. На самом деле обсуждать вопрос о понижении уже сейчас, даже после приобретения лицензии разработчиков. Больше информации здесь, если вы не понимаете, что вам нужен один для коммерческого проекта: fooobar.com/questions/232051/...
Вот еще одна мысль. У меня был
html { overflow-y: scroll; }
в моем основном CSS, чтобы предотвратить центрированный контент от прыжков между страницами, которые сделали или не нуждались в полосе прокрутки. Я попробовал все вышеперечисленное, чтобы избавиться от полосы прокрутки во всплывающем окне, пока не понял это. Как только я отключил его только для всплывающего окна, панель прокрутки в всплывающем окне исчезла. Итак, убедитесь, что полоса прокрутки, которую вы видите, на самом деле происходит из iframe, а не со страницы внутри.
Мои 2 цента, напишите
*{ margin:0; padding:0; }
на главной странице целевой страницы, добавьте содержимое div с размером высоты всех ваших элементов, не трогайте .js, listo, saludos
Изменить строку 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')},
мир
В ответах здесь есть много способов потенциально решить эту проблему, но большинство из них не будут работать на устройствах с сенсорными экранами. Я думаю, что источник проблемы проистекает из этих строк кода из источника:
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
Это, по-видимому, отменяет любые параметры, заданные начальной конфигурацией fancybox, и может быть изменена только после выполнения этих строк кода, т.е. изменения css с помощью метода afterShow. Тем не менее, все такие методы вызовут заметную задержку/задержку, и вы сможете увидеть, как полосы прокрутки исчезают при ее открытии.
Я предположил, что вы удаляете эти строки из основного исходного файла jquery.fancybox.js по строке 880, потому что я не вижу причины принудительно использовать полосы прокрутки на устройствах с сенсорными экранами.
Обратите внимание, что это не приведет к тому, что полосы прокрутки исчезнут, а просто перестанет переопределять параметр конфигурации scrolling. Поэтому вы должны добавить scrolling: 'no' в свою первоначальную конфигурацию fancybox.
Другой альтернативой является изменение overflow:
body {
overflow: hidden;
}
в вашем iframe HTML.