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

Question

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

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

Answer 1

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

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

Answer 2

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

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

Edit: Просмотрел ваш пример-сайт. Похоже, что в контенте есть набор ширины, который больше самого fancybox.

Answer 3

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

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

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

Однако просто установить опцию «прокрутка» на «нет» было недостаточно. Мне пришлось повторить то же самое в опции 'iframe', например так:

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

Answer 4

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

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

Answer 5

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

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

Answer 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.

Answer 7

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

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

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

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

Answer 8

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

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

Answer 9

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

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

У меня есть следующая конфигурация js, и она хорошо работает без изменения CSS в fancybox.

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

Answer 10

Я считаю, что решение этой проблемы - установить

'autoDimensions' : false

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