IT業界の技術をメモ・情報公開できる

jqueryで見えている部分だけの高さを取得

登録日:2025-02-28   
JS jquery
function getVisibleHeight($element) {
var scrollTop = $(window).scrollTop(); // 現在のスクロール位置
var windowHeight = $(window).height(); // ビューポートの高さ
var elementTop = $element.offset().top; // 要素の上端位置
var elementHeight = $element.outerHeight(); // 要素の高さ

var visibleTop = Math.max(elementTop, scrollTop); // 見えている上端
var visibleBottom = Math.min(elementTop + elementHeight, scrollTop + windowHeight); // 見えている下端

return Math.max(0, visibleBottom - visibleTop); // 見えている部分の高さ
}

// 使用例
$(window).on("scroll resize", function() {
var visibleHeight = getVisibleHeight($("#target"));
console.log("見えている部分の高さ: " + visibleHeight + "px");
});

一覧に戻る