fancybox2 / fancybox ทำให้หน้ากระโดดขึ้นไปด้านบน

105

ฉันได้ติดตั้ง fancybox2 บนไซต์ dev

เมื่อฉันเข้าร่วม fancybox (คลิกลิงก์ ฯลฯ ) html ทั้งหมดจะเลื่อนไปข้างหลัง - และไปที่ด้านบน ฉันใช้งานได้ดีในการสาธิตอื่น แต่เมื่อฉันลากรหัสเดียวกันไปที่โปรเจ็กต์นี้มันจะกระโดดขึ้นไปด้านบน ไม่เพียง แต่มีลิงก์ไปยัง Divs แบบอินไลน์เท่านั้น แต่ยังรวมถึงแกลเลอรีรูปภาพแบบธรรมดาอีกด้วย

มีใครมีประสบการณ์นี้บ้าง?

jquery css fancybox-2

— นายอำเภอ
แหล่งที่มา

หมายเหตุ: ฉันเพิ่งตรวจสอบสิ่งนี้บน ipad และ iphone และปัญหานี้ไม่เกิดขึ้น ... อย่างไรก็ตามมันอยู่ใน chrome และ 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

นี่เป็นวิธีที่แน่นอน OP ควรทำเครื่องหมายว่าเป็นคำตอบที่ยอมรับ ขอบคุณสำหรับสิ่งนี้!

— cfx

เห็นด้วยอย่างสิ้นเชิง. คำตอบที่ยอมรับ (เพื่อลบโค้ดจาก fancybox2) คือแฮ็ค

— Rob Gonzalez

โชคไม่ดีที่คำตอบที่ได้รับการยอมรับไม่ได้รับการเปลี่ยนแปลงในหนึ่งปีเต็ม หวังว่าผู้ใช้ในอนาคตจะใช้สิ่งนี้และไม่ใช่คำตอบ "สับโค้ดออกจากปลั๊กอิน"

— AndyWarren

5

ฉันคิดว่าคำตอบนี้ไม่สามารถแก้ปัญหาได้ หลายคนอาจไม่ชอบที่จะเลื่อนเนื้อหาไปด้านหลัง fancybox (สิ่งนี้จะเกิดขึ้นหากlockedถูกตั้งค่าเป็นfalse) นี่เป็นวิธีแก้ปัญหาชั่วคราวสำหรับปัญหาที่อาจสร้างขึ้นอีกสำหรับบางสถานการณ์ นี่เป็นข้อบกพร่องและได้รับการแก้ไขแล้วในgithub.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK ฉันยอมรับว่าการแก้ไขนี้อาจไม่เหมาะจริง ๆ เนื่องจากการเลื่อน แต่ฉันได้ทดสอบกับต้นแบบล่าสุดแล้วและหน้ายังคงกระโดดขึ้นไปด้านบน มันจะย้อนกลับไปที่ตำแหน่งเดิมเมื่อปิด fancybox

— Mr Jonny Wood

35

Jordanj77 ถูกต้อง แต่วิธีแก้ปัญหาที่ง่ายที่สุดคือไปที่สไตล์ชีทjquery.fancybox.cssและแสดงความคิดเห็นในแถวที่ระบุoverflow: hidden !important;ไว้ในส่วน.fancybox-lock

— ตอบสนองอย่างรวดเร็ว
แหล่งที่มา

4

วิธีนี้ดีกว่าการใช้ตัวช่วยเนื่องจากด้วยตัวช่วยหน้าจะยังคงเลื่อนไปข้างใต้ภาพซ้อนทับด้วยล้อเมาส์ การแสดงความคิดเห็นมากเกินไปทำให้ไม่สามารถกระโดดได้ แต่แถบเลื่อนยังคงถูกล็อกสำหรับหน้าหลัก

— Panama Jack

14

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันคิดว่าฉันพบทางออกที่ดีแล้ว ปัญหาคือกล่องแฟนซีเปลี่ยนค่าส่วนเกินของเนื้อหาเพื่อซ่อนแถบเลื่อนของเบราว์เซอร์

ดังที่ 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();
      }
    });

และเพิ่มฟังก์ชันเหล่านี้จาก 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;  
    }

— โจแรน
แหล่งที่มา

9

ปัญหาคือ fancyBox เปลี่ยนค่าส่วนเกินของเนื้อหาเพื่อซ่อนแถบเลื่อนของเบราว์เซอร์ ฉันไม่พบตัวเลือกในการสลับพฤติกรรมนี้

คุณสามารถลบส่วนนี้ของโค้ด fancyBox เพื่อป้องกัน:

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

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

— จอร์แดน
แหล่งที่มา

เย้! นั่นคือสาเหตุที่หน้าของฉันกระโดดไปทางซ้าย 20px ขอบคุณ! คุณแก้ปัญหา 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

การเขียนทับรูปแบบบุคคลที่สามไม่ใช่ความคิดที่ดีโดยเฉพาะอย่างยิ่งหากคุณต้องใช้ตัวปรับแต่ง! important เพื่อทำลายน้ำตก ฉันขอแนะนำให้ทุกคนใช้การแก้ไขที่ Dave Kiss ให้ไว้ข้างต้นไม่ใช่อันนี้

— Fabian Schöner

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

บางทีคำตอบนี้อาจจะช้าไป แต่บางทีมันอาจจะช่วยได้ในอนาคตหากหลังจากการพูดซ้ำซาก / ปิดกล่องแฟนซีทำให้เว็บไซต์ของคุณเลื่อนขึ้นไปด้านบนคุณสามารถลบ:

F.trigger('onReady');

หรือใช้ดีกว่า:

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

ในเวอร์ชัน fancyBox: 2.1.5 (ศ. 14 มิ.ย. 2556) ส่วนของโค้ดจะอยู่ที่บรรทัด 897

— Nahomy Atias
แหล่งที่มา

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