Pertanyaan jQuery .is (": visible) untuk elemen yang diposisikan secara mutlak di luar viewport


Saya mencoba mencari tahu apakah ini adalah cara yang benar untuk mendapatkan status visibilitas wadah div yang memiliki position: absolute.

Saya memiliki sidebar di sebelah kiri viewport saya. Ketika mengklik tombol "sidebar-tombol" "sideBar" mendapat animasi keluar dari area yang terlihat.

jQuery:

$('#sideBarButton').click(function(){
    sidebar = $("#sideBar").outerWidth();
    if(!$("#sideBar").hasClass('outof'))
    {
       $("#sideBar").animate({left: screenW},100).addClass('outof');
       $("#boardContent").animate({width: screenW},200);
       $("#sideBarButton").animate({left: "+=" + (sidebar -3)},100);
    }
    else 
    {
       $("#boardContent").animate({width: bcW}, 50);
       setTimeout(function(){
           $("#sideBar").animate({left: screenW - sidebar}, 200).removeClass('outof');
           $("#sideBarButton").animate({left: "-=" + (sidebar -3)},200);
       }, 120);
    }
    $(this).find('img').toggle();
});

Karena sideBar sekarang tidak terlihat sama sekali (untuk mata saya) dan posisi kiri sidebar lebih besar dari document.width pertanyaan saya adalah saya bisa mendapatkan status keterlihatan (dari sideBar) seperti ini:

if($("#sideBar").is(":visible"))...

atau apakah ada cara yang lebih baik? Maksud saya bagaimana jQuery memutuskan apakah suatu elemen terlihat atau tidak?


4
2017-07-29 12:38


asal


Jawaban:


Kutipan jQuery sendiri

Elemen dianggap terlihat jika mereka mengkonsumsi ruang dalam dokumen.   Elemen yang terlihat memiliki lebar atau tinggi yang lebih besar dari nol.

Elemen dengan visibilitas: tersembunyi atau opasitas: 0 dianggap terlihat,   karena mereka masih mengkonsumsi ruang di tata letak.

Jadi dengan terlihat, jQuery tidak memperhitungkan elemen yang ditarik keluar dari viewport. Misalnya. jika Anda menggulir halaman ke bawah, header masih dianggap terlihat, meskipun Anda tidak dapat melihatnya dengan mata.

Untuk memeriksa apakah bilah sisi terlihat, beberapa (tidak demikian) perhitungan rumit harus dilakukan sendiri, atau cukup tambahkan atribut kelas atau data ketika bilah sisi keluar, seperti yang sudah Anda lakukan menggunakan outof kelas.


3
2017-07-29 12:45



Dari dokumentasi jQuery:

Elemen dianggap terlihat jika mereka mengkonsumsi ruang dalam dokumen.   Elemen yang terlihat memiliki lebar atau tinggi yang lebih besar dari nol.

Elemen dengan visibilitas: tersembunyi atau opasitas: 0 dianggap terlihat,   karena mereka masih mengkonsumsi ruang di tata letak.

Elemen yang tidak ada dalam dokumen dianggap tersembunyi;   jQuery tidak memiliki cara untuk mengetahui apakah mereka akan terlihat kapan   ditambahkan ke dokumen karena tergantung pada gaya yang berlaku.

Ini berarti bahwa menggunakan kiri / kanan atau margin-kiri / margin-kanan, tidak akan bekerja menggunakan ": terlihat" pemilih. Saya pikir apa yang perlu Anda lakukan memeriksa nilai-nilai tersebut (misalnya jika Anda menggunakan kiri / kanan, gunakan sesuatu seperti ini:

if($("#sideBar").css("left") < 0)...  //(maybe parseInt will be needed here)
if(parseInt($("#sideBar").css("left")) < 0)...

Saya akan menggunakan kelas css dan memeriksa apakah kelas sudah diterapkan atau tidak. Misalnya kelas ".lide-out" akan memiliki nilai yang diperlukan untuk menyembunyikan sidebar, dan jika kelas ada di elemen maka itu "tersembunyi".

if($("#sideBar").hasClass("slide-out"))...

Juga jika Anda akan menggunakan properti "kiri", mungkin Anda perlu melihat "posisi (). Kiri"

$("#sideBar").position().left

1
2017-07-29 12:48



Dengan sedikit pengujian sepertinya :visible tidak mempertimbangkan apakah suatu item ada di layar atau tidak.

http://jsfiddle.net/7uLg7/

Dari http://api.jquery.com/visible-selector/ :

Elemen dianggap terlihat jika mereka mengkonsumsi ruang dalam dokumen. Elemen yang terlihat memiliki> lebar atau tinggi yang lebih besar dari nol.

Elemen dengan visibilitas: tersembunyi atau opasitas: 0 dianggap terlihat, karena mereka masih mengkonsumsi ruang dalam tata letak.

Elemen yang tidak ada dalam dokumen dianggap tersembunyi; jQuery tidak memiliki cara untuk mengetahui apakah mereka akan terlihat ketika ditambahkan ke dokumen karena tergantung pada gaya yang berlaku.

Untuk menguji apakah sideBar Anda terlihat Saya pikir Anda harus mengambil rute yang lebih sulit dan menguji posisi dan tinggi / lebarnya terhadap ukuran jendela pengguna dengan mempertimbangkan nilai gulir.


1
2017-07-29 12:58



Berikut ini adalah tes kecil yang saya lakukan untuk menunjukkan hasil dari pertanyaan Anda: http://jsfiddle.net/dBgT3/

HTML

<div id="visible"></div>
<div id="hidden"></div>
<div id="offScreen"></div>

jQuery

$('div').each(function(){
    $('body').append('#' + $(this).attr('id') + ' - ' + $(this).is(':visible') + '<br />');
});

CSS

#hidden {
    display: none;
}

#offScreen {
    position: absolute;
    left: -1000px;
}

Hasil

#visible - true
#hidden - false
#offScreen - false

Tampaknya Anda benar dalam mengasumsikan jika elemen di luar layar mengembalikan kesalahan. Semoga ini membantu!


Edit Jika elemen yang diposisikan dari layar memiliki lebar atau tinggi yang ditetapkan, hasilnya akan berubah.

CSS

div {
    height: 1px; 
    width: 1px; 
}

Hasil Baru

#visible - true
#hidden - false
#offScreen - true

Terima kasih untuk giorgio karena menunjukkan hal itu!


1
2017-07-29 12:45