fancybox2 / fancybox змушує сторінку перескакувати до вершини

105

Я реалізував fancybox2 на сайті розробників.

Коли я залучаю fancybox (натискаю посилання тощо), весь html зміщується за ним - і переходить до вершини. У мене це добре працює в іншій демонстрації, але коли я перетягую той самий код до цього проекту, він переходить на вершину. Не тільки з посиланнями на вбудовані диви, але і для простої галереї зображень.

Хтось це переживав?

jquery css fancybox-2

— шерифдерек
джерело

Примітка: Я щойно перевірив це на ipad iphone, і ця проблема не виникає ... однак це в хромі та firefox.

— шерифдерек

1

Якщо ви використовуєте fancybox v2.1.5, здається, що проблема була виправлена в останньому майстрі, що ви можете завантажити форму тут github.com/fancyapps/fancyBox/archive/master.zip, тому більше не буде злому ні на js, ні на файли css .

— JFK

331

Це фактично можна зробити за допомогою помічника у Fancybox 2.

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

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

— Дейв Поцілунок
джерело

11

Це, безумовно, спосіб зробити це. ОП має позначити це як прийняту відповідь. Дякую за це!

— cfx

Повністю згоден. Прийнята відповідь (для видалення коду з fancybox2) - хак.

— Роб Гонсалес

На жаль, прийнята відповідь не була змінена протягом повного року. Сподіваюсь, майбутні користувачі реалізують це, а не відповідь "нарізати код із плагіна".

— AndyWarren

5

Я думаю, що ця відповідь не вирішує питання. Багатьом людям, можливо, не подобається мати можливість прокручувати вміст за фанбокс (це, що станеться, якщо lockedвстановлено false.) Це тимчасове вирішення проблеми, яка може створити інший для деяких сценаріїв. Це помилка, і вона була виправлена в останньому майстрі github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Я погоджуюся, що це виправлення насправді не може бути ідеальним через прокрутку, але я перевірив його з останнім майстром, і сторінка все ще підскакує до вершини. Воно повертається до вихідного положення, хоча fancybox закритий.

— Містер Джоні Вуд

35

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

— швидкі рефлекси
джерело

4

Це краще, ніж використовувати helper, оскільки за допомогою helper сторінка продовжує прокручуватися під накладкою колесом миші. Коментування переповнення не дозволяє стрибати, але панель прокрутки все ще заблокована для головної сторінки.

— Панама Джек

14

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

Як зазначає Дейв Кісс, ми можемо зупинити фантазійну скриньку від цього, додавши наступні параметри:

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

Але тепер ми можемо прокручувати головну сторінку, дивлячись на наше вікно вишуканого вікна. Це краще, ніж стрибати на верхню частину сторінки, але це, мабуть, не те, що ми насправді хочемо.

Ми можемо запобігти прокрутці правильним способом, додавши наступні параметри:

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

І додайте ці функції з галамбалаза. Див.: Як тимчасово відключити прокрутку?

    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;  
    }

— Джоеран
джерело

9

Проблема полягає в тому, що fancyBox змінює значення переповнення тіла, щоб приховати панелі прокрутки браузера. Не вдалося знайти варіант переключити цю поведінку.

Ви можете видалити цей розділ коду fancyBox, щоб запобігти його:

if (obj.locked) {
    this.el.addClass('fancybox-lock');

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

— jordanj77
джерело

ТАК! Тому моя сторінка стрибала 20 пікселів ліворуч тоді. Дякую! Ви вирішили 2 мої проблеми!

— шерифдерек

Панелі прокрутки є ... але я завжди використовую overflow-y: scroll; у будь-якому випадку, тому для мене це справедлива компроміс.

— шерифдерек

Я думаю, що це заблокує функціональність колеса миші - я продовжуватиму шукати й інші рішення. Але, як я вже сказав, це зараз робить трюк!

— шерифдерек

3

Якщо ви використовуєте fancybox v2.1.5, здається, що проблема була виправлена в останньому майстрі, що ви можете завантажити форму тут github.com/fancyapps/fancyBox/archive/master.zip, тому більше не буде злому ні на js, ні на файли css .

— JFK

1

Це була найкраща відповідь на той момент ... і якщо з якихось причин у вас є застарілий сайт чи щось ---, розгляньте це як деяку посилання.

— шерифдерек

6

Незважаючи на те, що правильний спосіб вирішення цієї проблеми здійснюється за допомогою параметрів, які надає fancybox ( див. Цю відповідь ), CSS може бути використаний для вирішення проблеми. Не потрібно редагувати файл css бібліотеки, просто додайте це до основної таблиці стилів програми:

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

Код скидає початкове переповнення елемента. Проблема полягає в тому, що overflow: hidden;приховує смугу прокрутки на <html>елементі, що призводить до того, що сторінка «перестрибує» вгору. Щоб зберегти положення смуги прокрутки, перезаписуємо переповненняoverflow: visible;

— thexpand
джерело

Ще одна причина, чому це могло статися, це тому, що <body>або / і <html>може бутиheight: 100%

— thexpand

4

Це також допомогло

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

— hsobhy
джерело

1

Переписування стилів 3rdparty - це не дуже гарна ідея, особливо якщо вам доведеться використовувати важливий модифікатор для розбиття каскаду. Я закликаю всіх використовувати виправлення, надані Дейвом Кіссом вище, а не цей.

— Фабіан Шьонер

1

Прийнята відповідь не є повною, оскільки вона фактично не вирішує проблему, вона просто уникає її! Ось більш повна відповідь, яка фактично надає вам бажану функціональність під час вирішення питання про перехід вікна:

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

— Ян
джерело

0

Можливо, ця відповідь є пізнім alil, але, можливо, це може допомогти в майбутньому, якщо після натискання / закриття зображення fancybox змусить ваш веб-сайт прокрутити до вершини, ви можете просто видалити:

F.trigger('onReady');

або краще використовувати:

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

У версії fancyBox: 2.1.5 (пт, 14 червня 2013 р.), Що частина коду знаходиться у рядку 897.

— Нахомій Атіас
джерело

0

Ви можете фактично кодувати так, якщо ви використовуєте функцію за замовчуванням fancybox:

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

— Стіл Рокі
джерело

-4

Я зафіксував це за допомогою:

overflow: hidden !important;

в .fancybox-lockтілі в jquery.fancybox.css. І смуга прокрутки не стрибає :)

— user2684988
джерело

4

Ось що говорили швидкі рефлекси близько місяця тому.

— BoltClock