React-window: Windowscroller

WindowScroller adalah salah satu komponen pemeliharaan yang menyakitkan. Saya melihat kegunaannya, tetapi saya tidak yakin saya tertarik untuk berkomitmen untuk mempertahankan yang lain. Saya lebih suka, jika mungkin, untuk komponen eksternal yang akan dibangun (dan diterbitkan secara terpisah) yang mengimplementasikan fungsi ini di atas jendela reaksi.

Saya mungkin bersedia membuat beberapa perubahan pada react-window untuk mendukung komponen seperti itu, jika ada, tergantung seberapa rumitnya mereka.

Mungkin awal yang baik adalah bagi seseorang (Anda?) Untuk mengirimkan PR yang menambahkannya ke perpustakaan ini secara langsung– sehingga kami dapat melihat betapa rumitnya menerbitkan secara terpisah.

Jika Anda benar-benar membutuhkan penggulung jendela, Anda dapat menggunakan salah satu dari react-virtalized.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller dengan konten dinamis
https://codesandbox.io/s/xvl23p7okp

Saya pikir saya akan menutup masalah ini untuk saat ini karena saya tidak berencana untuk mengambil tindakan apa pun terhadapnya — dan rencana jangka panjang (setidaknya dalam pikiran saya) adalah modul terpisah. Saya masih akan senang melihat proposal!

Hu @PascalSenn , apakah Anda menggunakan WindowScroller dari react-virtualized dengan sukses? Terima kasih sebelumnya

Hai lagi @PascalSenn , Saya mencoba pendekatan Anda dengan kisi tetapi tidak berhasil untuk saya. Bisakah kamu menolong?

Terima kasih sebelumnya

@bayu_joo
Untuk memperbaiki masalah Anda, Anda harus kembali ke dokumen yang menjelaskan bahwa untuk Grid, Anda harus memberikan tanda tangan param lain selain Daftar
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

Semoga ini bisa membantu ...
Catatan: hati-hati dengan trik CSS @PascalSenn

// This height will override the window.innerHeight set in JSX : height={window.innerHeight}
.window-scroller-override {
  height: 100% !important;
}

Untuk memberikan bantuan, berikut contoh dengan Grid yang berfungsi: https://codesandbox.io/s/wq301o8qz7

Jika Anda benar-benar membutuhkan penggulung jendela, Anda dapat menggunakan salah satu dari react-virtalized.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller dengan konten dinamis
https://codesandbox.io/s/xvl23p7okp

FYI bagi siapa pun yang mempertimbangkan contoh-contoh ini, harap dicatat bahwa penggunaan window.innerWidth dan window.innerHeight tidak memperhitungkan keberadaan scrollbar. Ukuran scrollbar, yang bervariasi menurut browser / perangkat (dan apakah ini cukup konten untuk disajikan), perlu dikurangi.

@bvaughn , Bisakah kita mengontrol kecepatan putar Daftar virtual sangat diperlukan untuk mencegah geser terlalu cepat dan rendering tanpa elemen

@kgregory , tahu bagaimana ini akan bekerja dengan InfiniteLoader ? Dalam contoh yang Anda berikan, WindowScroller onScroll menggunakan referensi yang dibuat di lingkup luar dan diterapkan ke List , tetapi jika Anda menggunakan InfiniteLoader , anak panggilan balik untuk InfiniteLoader mendapatkan ref dari argumennya dan menerapkan _that_ ke List . Sepertinya tidak mungkin menggunakan referensi yang sama untuk kedua persyaratan. Semua yang saya coba sejauh ini tidak berhasil.

@mrdanimal lihat jawaban ini untuk mereferensikan daftar ref dengan ref yang berasal dari InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

Saya bisa memperbaiki beberapa masalah di kodesandbox @PascalSenn, tetapi akhirnya membuat dua masalah sendiri untuk menguji beberapa hal yang relevan dengan proyek saya. Saya memposting ini di sini jika berguna bagi siapa pun.

Contoh FixedSizeList: https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
Contoh VariableSizeGrid: https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn

Tampaknya tidak berfungsi dengan DynamicSizeList. Apakah ada yang tahu solusinya? Itu akan menyelamatkan saya dari banyak masalah