Zaimplementowałem fancybox2 na stronie deweloperskiej.
Kiedy włączam fancybox (klikam link itp.), Cały html przesuwa się za nim - i przechodzi na górę. Mam go dobrze w innym demo, ale kiedy przeciągam ten sam kod do tego projektu, przeskakuje on na górę. Nie tylko z linkami do wbudowanych elementów div, ale także do prostej galerii obrazów.
Czy ktoś tego doświadczył?
jquery
css
fancybox-2
szeryfderek
źródło
źródło
Odpowiedzi:
W rzeczywistości można to zrobić za pomocą pomocnika w Fancybox 2.
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
źródło
locked
jest ustawione nafalse
). Jest to tymczasowe obejście problemu, który może powodować inny w niektórych scenariuszach. To był błąd i został poprawiony w najnowszym głównym github.com/fancyapps/fancyBox/archive/master.zipJordanj77 jest poprawny, ale najłatwiejszym rozwiązaniem jest po prostu przejście do arkusza stylów
jquery.fancybox.css
i skomentowanie wiersza mówiącegooverflow: hidden !important;
w sekcji.fancybox-lock
źródło
Zdaję sobie sprawę, że to stare pytanie, ale myślę, że znalazłem na nie dobre rozwiązanie. Problem polega na tym, że fantazyjne pudełko zmienia wartość przepełnienia treści, aby ukryć paski przewijania przeglądarki.
Jak wskazuje Dave Kiss, możemy powstrzymać fantazyjny box przed zrobieniem tego poprzez dodanie następujących parametrów:
Ale teraz możemy przewijać stronę główną, patrząc na nasze fantazyjne okno. Jest to lepsze niż przeskakiwanie na górę strony, ale prawdopodobnie nie jest to to, czego naprawdę chcemy.
Możemy zapobiec przewijaniu w odpowiedni sposób, dodając kolejne parametry:
I dodaj te funkcje z galambalaz. Zobacz: Jak tymczasowo wyłączyć przewijanie?
źródło
Problem polega na tym, że fancyBox zmienia wartość przepełnienia body, aby ukryć paski przewijania przeglądarki. Nie mogłem znaleźć opcji przełączania tego zachowania.
Możesz usunąć tę sekcję z kodu fancyBox, aby temu zapobiec:
źródło
Pomimo tego, że właściwym sposobem rozwiązania tego problemu są opcje, które dostarcza fancybox ( patrz odpowiedź ), CSS mógłby zostać użyty do rozwiązania problemu. Nie ma potrzeby edytowania pliku css biblioteki, wystarczy dodać to do głównego arkusza stylów aplikacji:
Kod resetuje oryginalne przepełnienie elementu. Problem polega na tym, że
overflow: hidden;
ukrywa pasek przewijania na<html>
elemencie, co powoduje, że strona „przeskakuje” na górę. Aby zachować położenie paska przewijania, nadpisujemy przepełnienie znakiemoverflow: visible;
źródło
<body>
lub / i<html>
mogąheight: 100%
To też pomogło
źródło
Przyjęta odpowiedź nie jest kompletna, ponieważ w rzeczywistości nie rozwiązuje problemu, po prostu go unika! Oto pełniejsza odpowiedź, która faktycznie zapewnia pożądaną funkcjonalność podczas rozwiązywania problemu przeskakiwania okien:
źródło
Może ta odpowiedź jest całkiem spóźniona, ale może mogłaby pomóc w przyszłości, jeśli po kliknięciu / zamknięciu fancybox obrazu spowoduje przewijanie witryny do góry, możesz po prostu usunąć:
lub lepiej użyć:
W wersji fancyBox: 2.1.5 (piątek, 14 czerwca 2013) ta część kodu znajduje się w linii 897.
źródło
Możesz faktycznie kodować w ten sposób, jeśli używasz domyślnej funkcji fancybox:
źródło
Naprawiłem to za pomocą:
w
.fancybox-lock
ciele wjquery.fancybox.css
. I pasek przewijania nie skacze :)źródło