Подтвердить что ты не робот

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

Я использую 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>

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

У меня одна и та же проблема, и после проб и ошибок я обнаружил, что вы можете избежать полос прокрутки, переопределяя класс фрейма 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, чтобы он вступил в силу.

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

'autoDimensions' : false

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

Ответ 10

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

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

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

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

Ответ 11

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

Пример

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

Ответ 12

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

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : 450,
            'height'  : 700,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

Ответ 13

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

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

div {overflow:auto;height:auto;}

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

Ответ 14

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

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

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

Ответ 15

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

iframe : {

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

Ответ 16

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

Ответ 17

Это единственное, что сработало для меня как для 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);
    });
  }
});

Ответ 18

Используя версию 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/...

Ответ 19

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

html {  overflow-y: scroll; }

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

Ответ 20

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

*{ margin:0; padding:0; }

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

Ответ 21

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

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

Ответ 22

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

к концу 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')},

мир

Ответ 23

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

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

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

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

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

Ответ 24

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

body {
    overflow: hidden;
}

в вашем iframe HTML.