Tatal bayang -bayang dengan javascript

Bayang -bayang menatal adalah reka bentuk pengalaman pengguna yang baik, dan bayangan dalaman kecil hanya akan dipaparkan apabila elemen dapat menatal. Anehnya, ini dapat dicapai dengan CSS dan merupakan contoh kemahiran CSS. Walau bagaimanapun ... ia tidak berfungsi pada safari iOS. Ia digunakan untuk bekerja, tetapi ia gagal dalam iOS 13 dan beberapa ciri CSS yang berguna, tanpa penjelasan mengapa, dan belum ditetapkan , tetapi kini telah ditetapkan sekurang -kurangnya pada bulan Julai 2022 (terima kasih kepada Ronald!).

Berikut adalah contoh CSS tulen yang anda dapat melihat kesannya dalam semua pelayar. Tangkapan skrin adalah seperti berikut: (tangkapan skrin harus dimasukkan di sini)

Saya bertanya soalan ini sekarang kerana saya telah melihat Jonnie Hallman menyebutnya lagi di blog. Dia menyebutnya sebagai butiran kecil yang hebat pada bulan Mei. Dalam sesetengah antara muka, bayangan menatal membuat banyak akal.

Melihat ke belakang, saya fikir penyelesaian yang berfungsi pada masa ini, menggunakan acara tatal. Jika kawasan menatal telah menatal, bayang -bayang atas dan kiri dipaparkan. Jika kawasan menatal tidak menatal sepenuhnya, bayang -bayang bawah dan kanan dipaparkan. Dengan ini, saya mencuba pendekatan yang paling mudah, paling langsung, dan paling tidak pandai, iaitu meletakkan div kosong di bahagian atas, kanan, bawah dan kiri kawasan menatal. Saya panggil "tepi" ini dan saya memerhatikan mereka menggunakan API Observer Persimpangan. Jika mana -mana kelebihan tidak bersilang dengan kawasan menatal, saya boleh mengandaikan bahawa kelebihan telah menatal dan bayangan kelebihan itu boleh dipaparkan. Kemudian, apabila tepi bersilang, saya dapat mengandaikan bahawa kawasan menatal telah mencapai tepi menatal, jadi saya dapat menyembunyikan bayang -bayang itu.

pandai! Malangnya, tidak ada demo dalam talian, tetapi baca artikel untuk maklumat lanjut mengenai pelaksanaannya.

Contoh berasaskan JavaScript lain

Tetapi saya fikir jika anda mahu melakukan ini, anda harus memilih kaedah IntersectionObserver. Mudah -mudahan, saya dapat melihat seseorang menyatukan bahagian terbaik idea -idea ini (petunjuk).

Atas ialah kandungan terperinci Tatal bayang -bayang dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!