jQuery - 요소가 벡터로 들어갈 때 요소의 스크롤 비율을 계산 하시겠습니까?

요소의 스크롤 비율을 시점에 입력하자마자 계산하는 방법은 무엇입니까?jQuery - 요소가 벡터로 들어갈 때 요소의 스크롤 비율을 계산 하시겠습니까?

는 은 소스의 몇 가지의 코드 내 조합

$(document).ready(function(){ 
 

 
    var initY = $('.scrollratio').offset().top 
 
    var height = $('.scrollratio').height() 
 
    var endY = initY + $('.scrollratio').height() 
 

 
    $(window).scroll(function(){ 
 
    var scroll = $(window).scrollTop() 
 

 
    var visible = isVisible(document.getElementById("demo")) 
 
    console.log(visible) 
 

 
    if (visible) { 
 
     console.log('in view') 
 
    } else { 
 
     console.log('out of view') 
 
    } 
 

 
    if(visible){ 
 
     var diff = scroll - initY 
 
     var ratio = Math.round((diff/height) * 100) 
 
     $('#note').text(ratio) 
 
    } 
 
    }) 
 
}) 
 

 
// Check if the element is in the viewport. 
 
// http://www.hnldesign.nl/work/code/check-if-element-is-visible/ 
 
function isVisible(node) { 
 
    // Am I visible? 
 
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the 
 
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such. 
 
    // That is why either width or height have to be > 0. 
 
    var rect = node.getBoundingClientRect() 
 
    return (
 
     (rect.height > 0 || rect.width > 0) && 
 
     rect.bottom >= 0 && 
 
     rect.right >= 0 && 
 
     rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
 
    ) 
 
}

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    font: 400 15px/1.8 "Lato", sans-serif; 
 
    color: #777; 
 
} 
 

 
body { 
 
    background:#171717; 
 
} 
 

 
.section-1 { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.scrollratio { 
 
    height: 2000px; 
 
    background:red; 
 
} 
 

 
#note { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    color: #FFFFFF; 
 
    margin: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="note" ></div> 
 
<div class="section-1"></div> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<div class="scrollratio" id="demo"></div> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br>

요소 (빨간색 상자) 뷰포트를 입력하면 그것은 음의 값을 가져오고 은 가져 요소의 상단이 윈도우 상단을 통과하기 시작할 때 양수 값.

어떤 아이디어가 뷰포트에있는 즉시의 양수 값 을 얻는 방법?

편집 :

$(document).ready(function(){ var initY = $('.scrollratio').offset().top var height = $('.scrollratio').height() var endY = initY + $('.scrollratio').height() var wHeight = $(window).height(); $(window).scroll(function(){ var scroll = $(window).scrollTop() var visible = isVisible(document.getElementById("demo")) if(visible){ var diff = scroll + wHeight - initY var ratio = Math.round((diff/height) * 100) $('#note').text(ratio) } }) }) // Check if the element is in the viewport. // http://www.hnldesign.nl/work/code/check-if-element-is-visible/ function isVisible(node) { // Am I visible? // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such. // That is why either width or height have to be > 0. var rect = node.getBoundingClientRect() return ( (rect.height > 0 || rect.width > 0) && rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) ) }

* { padding: 0; margin: 0; } body, html { height: 100%; margin: 0; font: 400 15px/1.8 "Lato", sans-serif; color: #777; } body { background:#171717; } .section-1 { width: 100%; min-height: 100%; } .scrollratio { height: 2000px; background:red; } #note { position: fixed; top: 0; left: 0; color: #FFFFFF; margin: 2em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="note" ></div> <div class="scrollratio" id="demo"></div> 

출처

2017-11-27 laukok

난 당신이뿐만 아니라 윈도우의 높이를 차지하지 않았기 때문에 단순히 같아요. 계산에 var wHeight = $(window).height();을 추가하기 만하면됩니다. 아래를 참조하십시오. 또한 매번 호출 할 필요가 없으므로 스크롤 이벤트 외부에 wheight 변수를 추가했음을 유의하십시오. 그러나이 경우에는 윈도우 크기 조정 및 변수 업데이트를 고려해야 할 수 있습니다.
PS : 나는 var diff =

편집의 계산에 wHeight 변수를 추가했습니다 : 설정, 나는 아래의 자바 스크립트를 업데이트 한 요청에 따라 조건부은 "첫 번째"창 높이 내에서 또는하지의 여부에 따라 wHeight . 경우

$(document).ready(function(){ 
 

 
    var initY = $('.scrollratio').offset().top 
 
    var height = $('.scrollratio').height() 
 
    var endY = initY + $('.scrollratio').height(); 
 

 
    if(initY > $(window).height()){ 
 
    wHeight = $(window).height(); 
 
    } else { 
 
    wHeight = 0; 
 
    }; 
 

 
    $(window).scroll(function(){ 
 
    var scroll = $(window).scrollTop() 
 
    var visible = isVisible(document.getElementById("demo")); 
 

 
    if(visible){ 
 
     var diff = scroll + wHeight - initY 
 
     var ratio = Math.round((diff/height) * 100); 
 
     $('#note').text(ratio) 
 
    } 
 
    }) 
 
}) 
 

 
// Check if the element is in the viewport. 
 
// http://www.hnldesign.nl/work/code/check-if-element-is-visible/ 
 
function isVisible(node) { 
 
    // Am I visible? 
 
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the 
 
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such. 
 
    // That is why either width or height have to be > 0. 
 
    var rect = node.getBoundingClientRect() 
 
    return (
 
     (rect.height > 0 || rect.width > 0) && 
 
     rect.bottom >= 0 && 
 
     rect.right >= 0 && 
 
     rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
 
    ) 
 
}

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    font: 400 15px/1.8 "Lato", sans-serif; 
 
    color: #777; 
 
} 
 

 
body { 
 
    background:#171717; 
 
} 
 

 
.section-1 { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.scrollratio { 
 
    height: 2000px; 
 
    background:red; 
 
} 
 

 
#note { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    color: #FFFFFF; 
 
    margin: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="note" ></div> 
 
<div class="section-1"></div> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<div class="scrollratio" id="demo"></div> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br>

다음과 같이 스크립트 "증거의 크기를 조정"뿐만 아니라 케이스 initY < $(window).height()에 음수를 방지, 당신이 할 수 있도록하고 싶습니다 (전역 변수에 의존) :

$(document).ready(function(){ 
function setVars(){ 
    initY = $('.scrollratio').offset().top 
    height = $('.scrollratio').height() 
    endY = initY + $('.scrollratio').height(); 

    if(initY > $(window).height()){ 
    wHeight = $(window).height(); 
    } else { 
    wHeight = 0; 
    }; 
}; 
setVars(); 
    $(window).scroll(function(){ 
    var scroll = $(window).scrollTop() 
    var visible = isVisible(document.getElementById("demo")); 

    if(visible){ 
     var diff = scroll + wHeight - initY; 
     var ratio = Math.round((diff/height) * 100); 
     if(ratio >= 0){ 
     $('#note').text(ratio); 
     }; 
    } 
    }) 
$(window).on("resize", setVars); 
}) 

// Check if the element is in the viewport. 
// http://www.hnldesign.nl/work/code/check-if-element-is-visible/ 
function isVisible(node) { 
    // Am I visible? 
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the 
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such. 
    // That is why either width or height have to be > 0. 
    var rect = node.getBoundingClientRect() 
    return (
     (rect.height > 0 || rect.width > 0) && 
     rect.bottom >= 0 && 
     rect.right >= 0 && 
     rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
    ) 
}

출처

2017-11-27 08:59:22

감사합니다. – laukok

빨간 상자가 맨 위에있을 때 (section-1없이), 10 번이나 40 번부터 시작됩니다. 위의 편집을 참조하십시오. – laukok

글쎄 그것은이 비율에 대한 당신의 목표에 달려 있습니다. 창 높이를 포함하면 div가 화면 아래쪽에서 화면으로 들어갈 때 (스크롤 할 때) 비율이 0이어야합니다. 'section-1'이 제거되면, div는 이미 화면의 상단에 있으므로, 비율은> 0입니다. 그러나 양쪽 모두를 "수용"하는 한 가지 방법은'wHeight' 조건부를 만드는 것입니다 - 업데이트 된 답변보기 –

jQuery - 요소가 벡터로 들어갈 때 요소의 스크롤 비율을 계산 하시겠습니까?

답변

관련 문제