javascript - 활성화 - 크롬 자바스크립트 실행안됨




브라우저에서 사용자가 볼 수있는 영역을 감지 할 수 있습니까? (3)

아래 이미지를 보면 A, B, C, D, E가 웹 사이트에 있으며 사용자는 A, B 및 D를 클릭하십시오. 브라우저를 아래로 스크롤해야하거나 일부 사용자가 더 큰 화면을 가질 수도 있고 브라우저에서 더 긴 창을 사용하여 요소 C를 볼 수도 있습니다.

좋아, 내 질문은 자바 스크립트를 사용하는 브라우저에서 사용자가 무엇을 보는지 알려주는 것인가? 이 요소에는 "A", "B"및 "D"가 있습니다.


그것을보십시오 :) http://jsfiddle.net/Aj2fU/5/

$('input').click(function(){
   // check for visible divs with class 'check'   
    $('.check').each(function(){
        var pos = $(this).offset(),
            wX = $(window).scrollLeft(), wY = $(window).scrollTop(),
            wH = $(window).height(), wW = $(window).width(),
            oH = $(this).outerHeight(), oW = $(this).outerWidth();

        // check the edges
        // left, top and right, bottom are in the viewport
        if (pos.left >= wX && pos.top >= wY && 
            oW + pos.left <= wX + wW && oH + pos.top <= wY + wH )
            alert('Div #' + $(this).attr('id') + ' is fully visible');
        else // partially visible   
        if (((pos.left <= wX && pos.left + oW > wX) ||
             (pos.left >= wX && pos.left <= wX + wW)) &&
            ((pos.top <= wY && pos.top + oH > wY)   ||
             (pos.top  >= wY && pos.top  <= wY + wH)))
            alert('Div #' + $(this).attr('id') + ' is partially visible');
        else // not visible 
            alert('Div #' + $(this).attr('id') + ' is not visible');
    });        
});​

매우 다양한 사업부에서 작동하도록 업데이트 되었습니다. 기본적으로 div의 왼쪽, 위쪽 및 오른쪽 하단 모서리가 모두 화면의 보이는 부분에 있는지, 부분적으로 또는 뷰포트 외부에 있는지 검사합니다.


기본적으로 윈도우 객체를 사용하여 뷰포트 차원을 측정해야합니다. 그런 다음 검사 할 각 요소를 반복하고 해당 요소가 적합한 지 계산해야합니다.

예제를 보려면 jsfiddle 을 참조하십시오.

후자를위한 코드는 다음과 같습니다.

HTML :

<div id="info">
    <p class="wxh"></p>
    <p class="txl"></p>
    <p class="report"></p>
</div>

<h1>A big list!</h1>
<ul></ul>

CSS :

#info{
    position: fixed;
    right: 0px;
    text-align: center;
    background: white;
    border: 2px solid black;
    padding: 10px;
}

JS :

    $(function(){

    $(window).bind('scroll.measure resize.measure',function(){

        // Gather together the window width, height, and scroll position.
        var winWidth = $(window).width(),
            winHeight = $(window).height(),
            winLeft = $(window).scrollLeft(),
            winTop = $(window).scrollTop(),
            winBottom = winTop + winHeight,
            winRight = winLeft + winWidth,
            inView = [];

        // Loop over each of the elements you want to check
        $('.inview').each(function(){

            // Get the elements position and dimentions.
            var pos = $(this).position(),
                width = $(this).outerWidth(),
                height = $(this).outerHeight();

            // Set bottom and right dimentions.
            pos.bottom = pos.top + height;
            pos.right = pos.left + width;

            // Check whether this element is partially within
            // the window's visible area.
            if((
                pos.left >= winLeft &&
                pos.top >= winTop &&
                pos.right <= winRight &&
                pos.bottom <= winBottom
            ) || (
                pos.left >= winLeft && pos.top >= winTop && 
                pos.left <= winRight && pos.top <= winBottom
            ) || (
                pos.right <= winRight && pos.bottom <= winBottom &&
                pos.right >= winLeft && pos.bottom >= winTop
            )){
                // Change this to push the actual element if you need it.
                inView.push( $(this).text() );
            }
        });

        // For the purposes of this example, we only need the
        // first and last element, but in your application you may need all.
        var first = inView.shift(),
            last = inView.pop();

        // Show the details in the info box.
        $('#info .wxh').text( winWidth+' x '+winHeight );
        $('#info .txl').text( winTop+' x '+winLeft );
        $('#info .report').text( 'Showing from '+first+' to '+last );
    });

    // The rest is just setup stuff, to make the area scrollable.
    for( var i=0; i<100; i++ ){
        $('ul').append('<li class="inview">List item '+i+'</li>');
    }

    $(window).trigger('resize.measure');
})    ​

당신은 창에 보이는 영역을 얻을 수 있습니다.

var pwidth = $(window).width();
var pheight = $(window).height();

그런 다음 문서 스크롤을 가져오고,

$(document).scroll(function(e) {
       var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

전체 예제는 다음과 같습니다. http://jsfiddle.net/parag1111/kSaNp/





html