【jQuery】要素が画面内に入ったかどうかを判定する方法

HTML


<head>
    <script src="jquery.inview.min.js"></script> <!-- ローカルにDLして使う -->
</head>

<!-- 略 -->

<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>
<p class="item">画面に入ると文字が大きくなる</p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<head>

</head>

<p class="item">画面に入ると文字が大きくなる</p>

CSS


.item {
    font-size: 16px;
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 500px;
}

1

2

3

4

5

6

7

8

.item {

font-size: 16px;

padding: 10px;

border: 1px solid red;

margin-bottom: 500px;

}

jQuery


$(function(){
    $('.item').on('inview', function(event, isInView) {
        if(isInView) { 
            $(this).animate({
                fontSize : '20px'
            }, 1000);
        }
    });
});

1

2

3

4

5

6

7

8

9

10

11

$(function(){

$('.item').on('inview', function(event, isInView) {

if(isInView) {

$(this).animate({

fontSize : '20px'

}, 1000);

}

});

jQuery


$(function(){
    //スクロールの度に実行
    $(window).scroll(function(){
        if(existsElementInView('element-name')) {
            //画面内にあるときの処理
            //画面内にあるときの処理
            //画面内にあるときの処理
        }
    });


    //要素が画面内に存在するかどうかをチェックする(厳密には指定の要素の"上端の座標"でチェックする)
    function existsElementInView(element) {
        console.log('-------');
        var position = $(element).offset().top; // 画面内にあるかどうかを調べたい対象の要素の"上端"の座標

        var view_height = $(window).height();     // 画面の高さ
        var view_top    = $(window).scrollTop();  // 画面の表示領域の最上部
        var view_bottom = view_top + view_height; // 画面の表示領域の最下部

        console.log('position : ' + position);
        console.log('view_height   : ' + view_height);
        console.log('view_top      : ' + view_top);
        console.log('view_bottom   : ' + view_bottom);

        //要素が画面内にあるかどうかをチェック
        if(position >= view_top && position <= view_bottom) {
            console.log('画面内にある : ' + element);
            return true;
        }

        console.log('画面内にない : ' + element);
        return false;
    }
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

$(function(){

//スクロールの度に実行

$(window).scroll(function(){

if(existsElementInView('element-name')) {

//画面内にあるときの処理

}

});

//要素が画面内に存在するかどうかをチェックする(厳密には指定の要素の"上端の座標"でチェックする)

function existsElementInView(element) {

console.log('-------');

var position = $(element).offset().top; // 画面内にあるかどうかを調べたい対象の要素の"上端"の座標

var view_height = $(window).height(); // 画面の高さ

var view_top = $(window).scrollTop(); // 画面の表示領域の最上部

var view_bottom = view_top + view_height; // 画面の表示領域の最下部

console.log('position : ' + position);

console.log('view_height : ' + view_height);

console.log('view_top : ' + view_top);

console.log('view_bottom : ' + view_bottom);

//要素が画面内にあるかどうかをチェック

if(position >= view_top && position <= view_bottom) {

console.log('画面内にある : ' + element);

return true;

}

console.log('画面内にない : ' + element);

return false;

}

});

【jQuery】要素が画面内に入ったかどうかを判定する方法

自分で何とかする方法

コメントを残すコメントをキャンセル

自分で何とかする方法

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル