ScrollIntoView () ทำให้ทั้งหน้าเลื่อน

ฉันใช้ ScrollIntoView () เพื่อเลื่อนรายการที่ไฮไลต์ในรายการเพื่อดู เมื่อฉันเลื่อนลงไปด้านล่าง ScrollIntoView (false) จะทำงานได้อย่างสมบูรณ์ แต่เมื่อฉันเลื่อนขึ้นไป ScrollIntoView (จริง) ทำให้ทั้งหน้าขยับเล็กน้อยซึ่งฉันคิดว่าตั้งใจ มีวิธีหลีกเลี่ยงการย้ายทั้งหน้าเมื่อใช้ ScrollIntoView (จริง) หรือไม่?

นี่คือโครงสร้างของหน้าของฉัน -

#listOfDivs {
  position:fixed;
  top:100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs มาจาก ajax call ใช้ซาฟารีมือถือ

ขอบคุณสำหรับความช่วยเหลือล่วงหน้า!

คุณสามารถใช้scrollTopแทนscrollIntoView():

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle: http://jsfiddle.net/LEqjm/

หากมีองค์ประกอบที่เลื่อนได้มากกว่าหนึ่งรายการที่คุณต้องการเลื่อนคุณจะต้องเปลี่ยนองค์ประกอบscrollTopทีละรายการโดยพิจารณาoffsetTopจากองค์ประกอบที่เข้ามาแทรกแซง สิ่งนี้จะช่วยให้คุณสามารถควบคุมได้ละเอียดเพื่อหลีกเลี่ยงปัญหาที่คุณพบ

แก้ไข: offsetTop ไม่จำเป็นต้องสัมพันธ์กับองค์ประกอบหลัก - มันสัมพันธ์กับบรรพบุรุษที่อยู่ในตำแหน่งแรก หากองค์ประกอบหลักไม่อยู่ในตำแหน่ง (สัมพัทธ์สัมบูรณ์หรือคงที่) คุณอาจต้องเปลี่ยนบรรทัดที่สองเป็น:

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

แก้ไขด้วย:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

ดู: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

ฉันก็มีปัญหานี้เช่นกันและใช้เวลาหลายชั่วโมงในการพยายามจัดการกับมัน ฉันหวังว่าการแก้ปัญหาของฉันอาจช่วยบางคนได้

การแก้ไขของฉันกลายเป็น:

• สำหรับ Chrome: เปลี่ยน.scrollIntoView()เป็น.scrollIntoView({block: 'nearest'})(ขอบคุณ @jfrohn)
• สำหรับ Firefox: ใช้overflow: -moz-hidden-unscrollable;กับองค์ประกอบคอนเทนเนอร์ที่เปลี่ยนไป
• ไม่ผ่านการทดสอบในเบราว์เซอร์อื่น

เล่นกับscrollIntoViewIfNeeded()... ตรวจสอบให้แน่ใจว่าเบราว์เซอร์รองรับ

ฉันได้เพิ่มวิธีการแสดงพฤติกรรมที่ไม่เหมาะสมของ ScrollIntoView - http://jsfiddle.net/LEqjm/258/ [ควรเป็นความคิดเห็น แต่ฉันไม่มีชื่อเสียงเพียงพอ]

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
        target.scrollIntoView(!0);
}
});

ปลั๊กอิน jQuery scrollintoview()เพิ่มความสามารถในการใช้งาน

แทนที่จะใช้ DOM เริ่มต้นคุณสามารถใช้ปลั๊กอินที่ทำให้เคลื่อนไหวเคลื่อนไหวได้และไม่มีเอฟเฟกต์ที่ไม่ต้องการ นี่เป็นวิธีที่ง่ายที่สุดในการใช้งานโดยใช้ค่าเริ่มต้น:

$("yourTargetLiSelector").scrollintoview();

ตรงไปที่โพสต์บล็อกนี้ซึ่งคุณสามารถอ่านรายละเอียดทั้งหมดและในที่สุดก็จะพาคุณไปที่ซอร์สโค้ดของปลั๊กอินGitHub

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

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

    function ensure_visible(element_id)
    {
        // adjust these two to match your HTML hierarchy
        var element_to_show  = document.getElementById(element_id);
        var scrolling_parent = element_to_show.parentElement;

        var top = parseInt(scrolling_parent.getBoundingClientRect().top);
        var bot = parseInt(scrolling_parent.getBoundingClientRect().bottom);

        var now_top = parseInt(element_to_show.getBoundingClientRect().top);
        var now_bot = parseInt(element_to_show.getBoundingClientRect().bottom);

        // console.log("Element: "+now_top+";"+(now_bot)+" Viewport:"+top+";"+(bot) );

        var scroll_by = 0;
        if(now_top < top)
            scroll_by = -(top - now_top);
        else if(now_bot > bot)
            scroll_by = now_bot - bot;
        if(scroll_by != 0)
        {
            scrolling_parent.scrollTop += scroll_by; // tr.offsetTop;
        }
    }

กำลังเพิ่มข้อมูลเพิ่มเติมเพื่อ@Jescoโพสต์

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodสำหรับเบราว์เซอร์ Chrome, Opera, Safari ถ้าองค์ประกอบที่มีอยู่แล้วภายในพื้นที่ที่มองเห็นของหน้าต่างเบราว์เซอร์แล้วไม่มีการเลื่อนจะเกิดขึ้น
  
• Element.scrollIntoView() วิธีการเลื่อนองค์ประกอบที่เรียกเข้าไปในพื้นที่ที่มองเห็นได้ของหน้าต่างเบราว์เซอร์

ลองใช้รหัสด้านล่างในmozilla.org scrollIntoView()ลิงค์ ^{โพสต์เพื่อระบุเบราว์เซอร์}

var xpath = '//*[@id="Notes"]';
ScrollToElement(xpath);

function ScrollToElement(xpath) {
    var ele = $x(xpath)[0];
    console.log( ele );

    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if (isChrome) { // Chrome
        ele.scrollIntoViewIfNeeded();
    } else {
        var inlineCenter = { behavior: 'smooth', block: 'center', inline: 'start' };
        ele.scrollIntoView(inlineCenter);
    }
}

ในบริบทของฉันเขาจะดันแถบเครื่องมือเหนียวออกจากหน้าจอหรือป้อนถัดจากปุ่ม fab ด้วยค่าสัมบูรณ์

โดยใช้การแก้ไขที่ใกล้ที่สุด

const element = this.element.nativeElement;
const table = element.querySelector('.table-container');
table.scrollIntoView({
  behavior: 'smooth', block: 'nearest'
});

ฉันมีปัญหาเดียวกันฉันแก้ไขโดยลบtransform:translateYCSS ที่ฉันวางไว้บนfooterหน้า