javascript 활성화 브라우저에서 사용자가 볼 수있는 영역을 감지 할 수 있습니까?




크롬 자바스크립트 실행안됨 (4)

다음을 사용하여 브라우저의 뷰포트 크기를 가져올 수 있습니다.

window.innerHeight;
window.innerWidth;

http://bit.ly/zzzVUv - 사이트가 나를 위해로드하지 않기 때문에 Google 캐시를 사용해야했습니다. 원본 페이지 : http://www.javascripter.net/faq/browserw.htm

페이지 아래로 얼마나 멀리 스크롤했는지 감지하고 싶다면 다음을 사용할 수 있습니다.

window.scrollX;   // Horizontal scrolling
window.scrollY;   // Vertical scrolling

또한, 나는 창 개체 - window.screen을 발견했다. 내 시스템에는 다음과 같은 데이터가 있습니다.

window.screen.availHeight = 994;
window.screen.availLeft = 0;
window.screen.availTop = 0;
window.screen.availWidth = 1280;
window.screen.colorDepth = 32;
window.screen.height = 1280;
window.screen.pixelDepth = 32;
window.screen.width = 1280;

나는 당신의 질문에 충분히 대답하기를 바랍니다.

아래 이미지를 보면 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