fancy box2 / fancy box는 페이지가 상단으로 점프하게 합니다.
저는 개발 사이트에서 fancy box2를 구현했습니다.
내가 팬시 박스(링크 등을 클릭)에 참여하면 전체 html이 뒤로 이동하고 상단으로 이동합니다.다른 데모에서는 잘 작동하지만, 이 프로젝트에 동일한 코드를 끌면 맨 위로 이동합니다.인라인 디브 링크뿐만 아니라 간단한 이미지 갤러리도 가능합니다.
이런 일을 겪어본 사람이 있습니까?
이것은 팬시박스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
이것이 오래된 질문이라는 것을 알지만, 저는 그것에 대한 좋은 해결책을 찾았다고 생각합니다.문제는 팬시박스가 브라우저 스크롤바를 숨기기 위해 본체의 오버플로우 값을 변경한다는 것입니다.
Dave Kiss가 지적한 바와 같이, 우리는 다음과 같은 매개변수를 추가함으로써 팬시박스가 이런 일을 하는 것을 막을 수 있습니다.
$('.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;
}
문제는 fancyBox가 브라우저 스크롤 바를 숨기기 위해 본체의 오버플로 값을 변경한다는 것입니다.이 동작을 전환할 옵션을 찾을 수 없습니다.
fancyBox 코드의 이 섹션을 제거하여 이를 방지할 수 있습니다.
if (obj.locked) {
this.el.addClass('fancybox-lock');
if (this.margin !== false) {
$('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
이 문제를 해결하는 적절한 방법은 옵션을 통해 해결할 수 있음에도 불구하고(이 답변 참조) CSS를 사용하여 문제를 해결할 수 있습니다.라이브러리의 CSS 파일을 편집할 필요는 없으며, 응용 프로그램의 메인 스타일시트에 추가하기만 하면 됩니다.
html.fancybox-lock {
overflow: visible !important;
}
코드가 요소의 원래 오버플로를 재설정합니다.문제는.overflow: hidden;스크롤 막대를 숨깁니다.<html>element: 페이지가 맨 위로 "jump"되도록 합니다.스크롤 바의 위치를 유지하기 위해 오버플로를 다음과 같이 덮어씁니다.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');
}
});
이 답변이 늦었을 수도 있지만 나중에 도움이 될 수도 있습니다. 이미지 팬시박스를 클릭/닫고 나서 웹사이트가 맨 위로 스크롤되는 경우 다음 항목을 삭제할 수 있습니다.
F.trigger('onReady');
또는 더 나은 용도:
/*F.trigger('onReady');*/
fancyBox 버전: 2.1.5 (2013년 6월 14일 금요일) 코드의 일부가 897번 줄에 있습니다.
fancybox 기본 기능을 사용하는 경우 실제로 다음과 같이 코드화할 수 있습니다.
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
또한 이 방법으로 시도해 볼 수 있습니다!
$.fancybox({
beforeShow: function () {
$("body").css({ 'overflow': 'hidden' });
},
afterClose: function () {
$("body").css({ 'overflow-y': 'visible' });
},
});
다음과 같이 고쳤습니다.
overflow: hidden !important;
인에.fancybox-lock의 몸jquery.fancybox.css 스크롤 그리고 스크롤 바는 뛰지 않습니다 :)
언급URL : https://stackoverflow.com/questions/13547007/fancybox2-fancybox-causes-page-to-to-jump-to-the-top
'programing' 카테고리의 다른 글
| EFcore를 사용하여 MariaDB에서 자동 증분 int 열 생성 (0) | 2023.10.03 |
|---|---|
| Python에서 각 하위 목록의 첫 번째 항목 추출 (0) | 2023.10.03 |
| 인식할 수 없는 특성 이름 MODULE(class com.sun.tools.javac.util)입니다.SharedNameTable$NameImppl) (0) | 2023.09.28 |
| MySQL 데이터베이스에 DECIAL을 삽입하는 방법 (0) | 2023.09.28 |
| 최대 절전 모드 트랜잭션 관리자 또는 Jpa 트랜잭션 관리자 (0) | 2023.09.28 |