ScrollIntoView () menyebabkan seluruh halaman berpindah

Saya menggunakan ScrollIntoView () untuk menggulir item yang disorot dalam daftar ke tampilan. Ketika saya menggulir ke bawah ScrollIntoView (false) bekerja dengan sempurna. Tetapi ketika saya menggulir ke atas, ScrollIntoView (true) menyebabkan seluruh halaman bergerak sedikit yang menurut saya memang dimaksudkan. Apakah ada cara untuk menghindari pemindahan seluruh halaman saat menggunakan ScrollIntoView (true)?

Ini adalah struktur halaman saya -

#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 berasal dari panggilan ajax. Menggunakan safari seluler.

Terima kasih atas bantuan Anda sebelumnya!

Anda bisa menggunakan scrollTopsebagai pengganti scrollIntoView():

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

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

Jika ada lebih dari satu elemen yang dapat digulir yang ingin Anda gulir, Anda harus mengubah scrollTopmasing-masing satu per satu, berdasarkan offsetTopelemen intervening. Ini akan memberi Anda kendali penuh untuk menghindari masalah yang Anda hadapi.

EDIT: offsetTop tidak selalu terkait dengan elemen induk - ini relatif terhadap leluhur yang diposisikan pertama. Jika elemen induk tidak diposisikan (relatif, absolut, atau tetap), Anda mungkin perlu mengubah baris kedua menjadi:

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

Perbaiki dengan:

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

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

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

Saya mengalami masalah ini juga, dan menghabiskan waktu berjam-jam untuk mengatasinya. Saya berharap resolusi saya masih dapat membantu beberapa orang.

Perbaikan saya akhirnya menjadi:

• Untuk Chrome: berubah .scrollIntoView()menjadi .scrollIntoView({block: 'nearest'})(terima kasih kepada @jfrohn).
• Untuk Firefox: terapkan overflow: -moz-hidden-unscrollable;pada elemen penampung yang bergeser.
• Tidak diuji di browser lain.

Bermain-main dengan scrollIntoViewIfNeeded()... pastikan itu didukung oleh browser.

Saya telah menambahkan cara untuk menampilkan perilaku penting ScrollIntoView - http://jsfiddle.net/LEqjm/258/ [ini seharusnya menjadi komentar tetapi saya tidak memiliki cukup reputasi]

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

Plugin jQuery scrollintoview()meningkatkan kegunaan

Alih-alih penerapan DOM default, Anda dapat menggunakan plugin yang menganimasikan gerakan dan tidak memiliki efek yang tidak diinginkan. Berikut cara paling sederhana untuk menggunakannya dengan default:

$("yourTargetLiSelector").scrollintoview();

Buka posting blog ini di mana Anda dapat membaca semua detailnya dan pada akhirnya akan membawa Anda ke kode sumber GitHub dari plugin tersebut.

Plugin ini secara otomatis mencari elemen leluhur terdekat yang dapat di-scroll dan menggulirnya sehingga elemen yang dipilih berada di dalam port tampilan yang terlihat. Jika elemen sudah ada di port tampilan, ia tentu saja tidak melakukan apa-apa.

Menggunakan ide Brilliant, berikut adalah solusi yang hanya (secara vertikal) menggulung jika elemen saat ini TIDAK terlihat. Idenya adalah untuk mendapatkan kotak pembatas viewport dan elemen yang akan ditampilkan di ruang koordinat jendela browser. Periksa apakah terlihat dan jika tidak, gulir sejauh yang diperlukan sehingga elemen ditampilkan di bagian atas atau bawah viewport.

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

Menambahkan lebih banyak informasi untuk @Jescomemposting.

• Element.scrollIntoViewIfNeeded() non-standard WebKit methoduntuk browser Chrome, Opera, Safari.
  Jika elemen sudah berada dalam area yang terlihat di jendela browser, maka tidak ada pengguliran yang terjadi .
• Element.scrollIntoView() metode menggulung elemen yang dipanggil ke dalam area yang terlihat di jendela browser.

Coba kode di bawah ini di mozilla.org scrollIntoView()tautan. ^{Posting untuk mengidentifikasi Browser}

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

dalam konteks saya, dia akan mendorong bilah alat lengket dari layar, atau masuk di sebelah tombol hebat dengan absolut.

menggunakan penyelesaian terdekat.

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

saya memiliki masalah yang sama, saya memperbaikinya dengan menghapus transform:translateYCSS yang saya tempatkan di footerhalaman.