JQuery - Fancybox: Но я не хочу полосы прокрутки! - PullRequest
25 голосов
/ 15 февраля 2010

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

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

Ответы [ 24 ]

51 голосов
/ 05 ноября 2010

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

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.
14 голосов
/ 15 февраля 2010

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

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

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

11 голосов
/ 09 августа 2013

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

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

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

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

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})
10 голосов
/ 17 ноября 2012

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

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}
9 голосов
/ 21 мая 2013

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

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }
7 голосов
/ 23 сентября 2012

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

6 голосов
/ 09 октября 2012

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

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

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

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

4 голосов
/ 03 октября 2013

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

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});
3 голосов
/ 04 декабря 2012

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

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

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

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});
3 голосов
/ 11 апреля 2012

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

'autoDimensions' : false

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

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