fancybox2 / fancybox заставляет страницу прыгать вверх

Я реализовал fancybox2 на сайте dev.

Когда я подключаю fancybox (нажмите ссылку и т. Д.), Весь html сдвинется за ним – и дойдет до вершины. У меня он работает отлично в другой демонстрационной версии, но когда я перетаскиваю тот же код в этот проект, он прыгает вверх. Не только со ссылками на встроенные div, но и для простой галереи изображений.

Кто-нибудь испытал это?

Это можно сделать с помощью помощника в Fancybox 2.

$('.image').fancybox({ helpers: { overlay: { locked: false } } }); 

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

Jordanj77 – это правильное, но самое простое решение – просто перейти к таблице стилей jquery.fancybox.css и прокомментировать строку, говорящую о overflow: hidden !important; jquery.fancybox.css overflow: hidden !important; в разделе .fancybox-lock

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

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

 $('.image').fancybox({ padding: 0, helpers: { overlay: { locked: false } } }); 

Но теперь мы можем прокручивать главную страницу, глядя на наше окно с фантастическим ящиком. Это лучше, чем прыгать в верхнюю часть страницы, но это, вероятно, не то, что мы действительно хотим.

Мы можем предотвратить прокрутку правильного пути, добавив следующие параметры:

  $('.image').fancybox({ padding: 0, helpers: { overlay: { locked: false } }, 'beforeLoad': function(){ disable_scroll(); }, 'afterClose': function(){ enable_scroll(); } }); 

И добавьте эти функции из galambalaz. См .: Как временно отключить прокрутку?

  var keys = [37, 38, 39, 40]; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return; } } } function wheel(e) { preventDefault(e); } function disable_scroll() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown; } function enable_scroll() { if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = document.onkeydown = null; } 

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

Вы можете удалить этот раздел кода fancyBox, чтобы предотвратить его:

 if (obj.locked) { this.el.addClass('fancybox-lock'); if (this.margin !== false) { $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth); } } 

Несмотря на то, что правильный способ решения этой проблемы – это варианты, которые предоставляет fancybox ( см. Этот ответ ), CSS может быть использован для решения проблемы. Нет необходимости редактировать файл css библиотеки, просто добавьте его в основную таблицу стилей приложения:

 html.fancybox-lock { overflow: visible !important; } 

Код сбрасывает исходное переполнение элемента. Проблема в том, что overflow: hidden; скрывает полосу прокрутки на элементе , что заставляет страницу «прыгать» вверх. Чтобы сохранить положение полосы прокрутки, мы перезаписываем переполнение с overflow: visible;

Это также помогло

 .fancybox-lock body { overflow: visible !important; } 

Принятый ответ не является полным, поскольку он фактически не решает проблему, которую он просто избегает! Вот более полный ответ, который на самом деле дает вам желаемую функциональность при исправлении проблемы перехода в окно:

  $('.fancybox').fancybox({ helpers: { overlay: { locked: false } }, beforeShow:function(){ $('html').css('overflowX', 'visible'); $('body').css('overflowY', 'hidden'); }, afterClose:function(){ $('html').css('overflowX', 'hidden'); $('body').css('overflowY', 'visible'); } }); 

Возможно, этот ответ слишком поздно, но, возможно, он может помочь в будущем, если после кликирования / закрытия изображения fancybox делает ваш веб-сайт прокруткой вверх, вы можете просто удалить:

 F.trigger('onReady'); 

или лучше использовать:

 /*F.trigger('onReady');*/ 

В версии fancyBox: 2.1.5 (пт, 14 июня 2013 г.) эта часть кода находится в строке 897.

Вы можете на самом деле закодировать это, если используете функцию fancybox по умолчанию:

  $(document).ready(function() { $(".fancybox").fancybox({ padding: 0, helpers: { overlay: { locked: false } } }); }); 

Я исправил это с помощью:

 overflow: hidden !important; 

в .fancybox-lock в jquery.fancybox.css . И прокрутка не прыгает 🙂

  • Использовать jQuery для изменения HTML-тега?
  • Как реализовать иерархический многоуровневый datatable в javaScript?
  • Преобразование даты времени UTC в локальное время
  • Как найти, существует ли div с определенным идентификатором в jQuery?
  • jQuery.animate () только с classом CSS, без явных стилей
  • Загрузите файл jQuery ajax в asp.net mvc
  • Порядок выполнения документа jquery готов
  • Fancybox: iframe не работает
  • поиск типа элемента с помощью jQuery
  • JQuery Анимация фонового изображения по оси Y
  • Как получить запрос на совместное использование ресурсов (CORS)
  • Interesting Posts

    Почему невозможно изменить размер / перемещение монтируемых (не логических) разделов во время выполнения?

    Существуют ли решения, которые могут ограничить использование процессором процесса?

    Возвышение на Android Lollipop не работает

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

    Pyinstaller – однофайльное предупреждение pyconfig.h при импорте scipy или scipy.signal

    JSTL в JSF2 Facelets … имеет смысл?

    Как установить оболочку в Mac OS X?

    Определяется тип исключения после исключения?

    Изменение языка системы с русского на английский в Vista

    Java: добавьте несколько строк в MySQL с помощью PreparedStatement

    System.Timers.Timer / Threading.Timer vs Thread with WhileLoop + Thread.Sleep для периодических задач

    Проверка сертификата x509 в C

    Как вы записываете Skype-беседу в Windows?

    Окна 7 случайным образом закрываются. Где найти соответствующий журнал? Так что я могу определить ошибку

    Должен ли я возвращать EXIT_SUCCESS или 0 из main ()?

    Давайте будем гением компьютера.