favouritebox2 / favourite khiến trang nhảy lên đầu

105

Tôi đã triển khai favouritebox2 trên một trang web dành cho nhà phát triển.

Khi tôi sử dụng hộp thư thích hợp (nhấp vào liên kết, v.v.), toàn bộ html sẽ thay đổi phía sau nó - và lên trên cùng. Tôi thấy nó hoạt động tốt trong một bản demo khác, nhưng khi tôi kéo cùng một đoạn mã vào dự án này, nó sẽ nhảy lên đầu. Không chỉ với các liên kết đến div nội tuyến, mà còn cho thư viện hình ảnh đơn giản.

Có ai đã trải qua điều này?

jquery css fancybox-2

— sheriffderek
nguồn

lưu ý: Tôi vừa kiểm tra điều này trên ipad và iphone và sự cố này không xảy ra ... tuy nhiên nó là trong chrome và firefox.

— sheriffderek

1

Nếu bạn đang sử dụng ưa thích v2.1.5, có vẻ như sự cố đã được khắc phục trong bản chính mới nhất mà bạn có thể tải xuống biểu mẫu tại đây github.com/fancyapps/fancyBox/archive/master.zip để không còn bị tấn công vào tệp js hoặc css .

— JFK

331

Điều này thực sự có thể được thực hiện với một trình trợ giúp trong Fancybox 2.

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

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

— Dave Kiss
nguồn

11

Đây chắc chắn là cách để làm điều đó. OP sẽ đánh dấu đây là câu trả lời được chấp nhận. Cảm ơn vì điều này!

— cfx

Hoàn toàn đồng ý. Câu trả lời được chấp nhận (để xóa mã khỏi ưa thích) là một hack.

— Rob Gonzalez

Thật không may, câu trả lời được chấp nhận đã không được thay đổi trong suốt một năm. Hy vọng người dùng trong tương lai thực hiện điều này và không phải là câu trả lời "cắt mã ra khỏi plugin".

— AndyWarren 17/10/13

5

Tôi nghĩ câu trả lời này không giải quyết được vấn đề. Nhiều người có thể không muốn cuộn nội dung phía sau hộp đựng (điều này sẽ xảy ra nếu lockedđược đặt thành false.) Đây là một giải pháp tạm thời cho một vấn đề có thể tạo ra một vấn đề khác trong một số trường hợp. Đây là một lỗi và nó đã được sửa trong trang chủ mới nhất github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Tôi đồng ý rằng bản sửa lỗi này có thể không thực sự lý tưởng vì quá trình cuộn, nhưng tôi đã thử nghiệm nó với bản chính mới nhất và trang vẫn nhảy lên đầu. Mặc dù vậy, nó sẽ trở lại vị trí ban đầu khi hộp thư thích được đóng lại.

— Mr Jonny Wood

35

Jordanj77 là chính xác nhưng giải pháp đơn giản nhất là chỉ cần vào bảng định kiểu jquery.fancybox.cssvà nhận xét hàng nói overflow: hidden !important;trong phần.fancybox-lock

— phản xạ nhanh
nguồn

4

Điều này tốt hơn là sử dụng helper vì với helper, trang tiếp tục cuộn bên dưới lớp phủ bằng con lăn chuột. Nhận xét về phần tràn giúp nó không bị nhảy nhưng thanh cuộn vẫn bị khóa đối với trang chính.

— Panama Jack

14

Tôi nhận ra đây là một câu hỏi cũ, nhưng tôi nghĩ rằng tôi đã tìm ra một giải pháp tốt cho nó. Vấn đề là hộp ưa thích đó thay đổi giá trị tràn của phần thân để ẩn các thanh cuộn của trình duyệt.

Như Dave Kiss đã chỉ ra, chúng ta có thể ngăn hộp ưa thích làm điều này bằng cách thêm các thông số sau:

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

Tuy nhiên, bây giờ chúng ta có thể cuộn trang chính trong khi nhìn vào cửa sổ hình hộp ưa thích của mình. Nó tốt hơn là nhảy lên đầu trang, nhưng nó có lẽ không phải là những gì chúng ta thực sự muốn.

Chúng tôi có thể ngăn việc cuộn đúng cách bằng cách thêm các tham số tiếp theo:

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

Và thêm các chức năng này từ galambalaz. Hãy xem: Làm cách nào để tắt tính năng cuộn tạm thời?

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

— Joeran
nguồn

9

Vấn đề nằm ở chỗ, ưa thích thay đổi giá trị tràn của phần thân để ẩn các thanh cuộn của trình duyệt. Tôi không thể tìm thấy tùy chọn để chuyển đổi hành vi này.

Bạn có thể xóa phần này của mã ưa thích để ngăn chặn nó:

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

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

— jordanj77
nguồn

ĐƯỢC! Đó cũng là lý do tại sao lúc đó trang của tôi nhảy sang trái 20px. Cảm ơn! Bạn đã giải quyết được 2 vấn đề của tôi!

— sheriffderek

Các thanh cuộn ở đó ... nhưng tôi luôn sử dụng tràn-y: scroll; Dù sao, đó là một sự đánh đổi công bằng đối với tôi.

— sheriffderek

Tôi đoán điều đó sẽ chặn chức năng con lăn chuột - tôi cũng sẽ tiếp tục tìm kiếm các giải pháp khác. Nhưng như tôi đã nói, điều này đang thực hiện thủ thuật ngay bây giờ!

— sheriffderek

3

Nếu bạn đang sử dụng ưa thích v2.1.5, có vẻ như sự cố đã được khắc phục trong bản chính mới nhất mà bạn có thể tải xuống biểu mẫu tại đây github.com/fancyapps/fancyBox/archive/master.zip để không còn bị tấn công vào tệp js hoặc css .

— JFK

1

Đây là câu trả lời tốt nhất vào thời điểm đó ... và nếu vì lý do nào đó mà bạn có một trang web cũ hoặc thứ gì đó --- hãy xem đây là một số tài liệu tham khảo.

— sheriffderek

6

Mặc dù thực tế, cách thích hợp để giải quyết vấn đề này là thông qua các tùy chọn, mà ưa thích cung cấp ( tham khảo câu trả lời này ), CSS có thể được sử dụng để giải quyết vấn đề. Không cần chỉnh sửa tệp css của thư viện, chỉ cần thêm tệp này vào biểu định kiểu chính của ứng dụng:

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

Mã đặt lại phần tử tràn ban đầu. Vấn đề là overflow: hidden;ẩn thanh cuộn trên <html>phần tử, khiến trang "nhảy" lên đầu. Để giữ nguyên vị trí của thanh cuộn, chúng tôi ghi đè phần tràn bằngoverflow: visible;

— thexpand
nguồn

Một lý do khác tại sao điều này có thể xảy ra là bởi vì <body>hoặc / và <html>có thể cóheight: 100%

— thexp và

4

Điều này cũng giúp

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

— hsobhy
nguồn

1

Ghi đè các phong cách của bên thứ ba không phải là một ý tưởng hay, đặc biệt nếu bạn phải sử dụng công cụ sửa đổi! Important để phá vỡ tầng. Tôi khuyến khích mọi người sử dụng bản sửa lỗi được cung cấp bởi Dave Kiss ở trên, không phải bản sửa lỗi này.

— Fabian Schöner

1

Câu trả lời được chấp nhận là không đầy đủ vì nó không thực sự giải quyết được vấn đề mà nó chỉ tránh nó! Đây là một câu trả lời đầy đủ hơn thực sự cung cấp cho bạn chức năng mong muốn trong khi khắc phục sự cố nhảy cửa sổ:

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

— Ian
nguồn

0

Có thể câu trả lời này là hơi muộn nhưng có thể nó có thể hữu ích trong tương lai, nếu sau khi đóng / đóng hộp hình ảnh ưa thích khiến trang web của bạn cuộn lên đầu, bạn chỉ cần xóa:

F.trigger('onReady');

hoặc sử dụng tốt hơn:

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

Trong phiên bản TreatBox: 2.1.5 (Thứ 6, ngày 14 tháng 6 năm 2013), một phần của mã nằm ở dòng 897.

— Nahomy Atias
nguồn

0

Bạn thực sự có thể viết mã như thế này nếu bạn đang sử dụng chức năng mặc định của hộp thư thích hợp:

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

— Steele Rocky
nguồn

-4

Tôi đã sửa nó bằng:

overflow: hidden !important;

trong .fancybox-lockcơ thể trong jquery.fancybox.css. Và thanh cuộn không nhảy :)

— user2684988
nguồn

4

Đó là những gì phản xạ nhanh đã nói về một tháng trước.

— BoltClock