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

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

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

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

10 Solutions collect form web for “fancybox2 / fancybox заставляет страницу прыгать вверх”

Это можно сделать с помощью помощника в 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?
  • Как программно отключить прокрутку страницы с помощью jQuery
  • jQuery: функция click исключает детей.
  • jQuery - Обнаружить изменение значения в скрытом поле ввода
  • Как использовать jQuery с угловым?
  • Проверьте, загружены ли изображения?
  • Найти текстовую строку в jQuery и сделать ее полужирным
  • jQuery autocomplete tagging plug-in, как tags ввода StackOverflow?
  • Обработчики событий jQuery всегда выполняются так, чтобы они были связаны - каким-то образом?
  • Простой просмотр ASP.NET MVC CRUD при открытии / закрытии в диалоге пользовательского интерфейса JavaScript
  • $ (window) .width () не совпадает с запросом медиа
  • Давайте будем гением компьютера.