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

Добавить iframe: {scrolling: 'no'} в качестве опции

пример

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

Answer 2

Удалить кавычки вокруг ваших значений высоты и ширины:

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

Answer 3

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

Answer 4

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

iframe : {

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

Answer 5

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

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

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

Answer 6

У меня была такая же проблема. Дело было не в свойствах fancybox или CSS, а в главной роли моего сайта.

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

div {overflow:auto;height:auto;} 

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

Answer 7

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

Answer 8

Используя версию 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! Важный хак.

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

Ответственная строка кода:

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

Fancybox раньше был надежным рабочим решением, и теперь я не нахожу ничего, кроме несоответствий. На самом деле спор о снижении рейтинга сейчас даже после покупки лицензии разработчика. Больше информации здесь, если вы не поняли, что вам нужен для коммерческого проекта: https://stackoverflow.com/a/8837258/560287

Answer 9

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

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

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

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

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

Answer 10

Другая альтернатива - изменить переполнение :

body {
    overflow: hidden;
}

в HTML-коде вашего iframe.