Я реализовал 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; в разделе .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; скрывает полосу прокрутки на элементе <html>, что заставляет страницу "прыгать" вверх. Чтобы сохранить положение полосы прокрутки, мы перезаписываем переполнение с помощью 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 (Fri, 14 июня 2013 г.) эта часть кода находится в строке 897.
Фактически вы можете сделать код таким образом, если вы используете функцию fancybox по умолчанию:
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
Я исправил его с помощью
overflow: hidden !important;
в .fancybox-lock тело в jquery.fancybox.css. И прокрутка не прыгает:)