오버플로 숨겨진 jQuery 선택기

<div> 안에 여러 개의 <p> 요소가 있습니다. <div>은 overflow-y:auto;이며, 아래로 스크롤하지 않으면보기에서 일부 <p> 개의 요소가 숨겨집니다. 참조 http://jsfiddle.net/qnuxs/1/오버플로 숨겨진 jQuery 선택기

<p> 요소를 완전히 (부분적으로는 보이지 않고) 오버플로가있는보기에서 숨겨지지 않도록 선택하는 jQuery 선택기를 작성하려면 어떻게해야합니까?

그래서 jsfiddle 예에서 제공 한 셀렉터는 완전히 볼 수있는 유일한 태그이기 때문에 처음에는 2 <p>'s (000과 111)을 제공해야합니다.

참고 : <p> 태그가 모두 필요한 높이가 아닙니다. 높이가 다를 수 있습니다.

출처

2011-03-13 Pinkie

모든 경우에 보이는 두 가지 요소는 아닙니다. 텍스트 크기가 엉망이라면? – BoltClock

@bolt 전적으로보기에있는 p를 선택하고 싶습니다. 아무 것도보기에 없다면 selector는 아무 것도 반환하지 않습니다. – Pinkie

은 여기의 핵심이다 나는 그것을 더 구체화하지만 RSP 너무 나를 이길 거라고.

출처

2011-03-13 05:04:20 aptwebapps

감사합니다. +1. 나는 너의 모범을 좀더 편안하게 느꼈다. – Pinkie

자바 스크립트 오류를 해결하는 감사 및 업데이트 버전 : http://jsfiddle.net/qnuxs/118/ – QMaster

당신은 당신의 자신의 .filter() 함수를 사용하여 예를 들어, 작업을 수행 할 수 있습니다

var st = $('div').scrollTop(), 
    sh = $('div').height(), 
    sb = st + sh - 1; 

$('p').css({ 
    background: '#ccc' 
}); 
$('p').filter(function() { 
    var $this = $(this), 
     h = $this.height(), 
     t = $this.position().top, 
     b = t + h - 1; 
    return (t >= st && b <= sb); 
}).css({ 
    background: 'red' 
});

참조 DEMO : 그것은 눈에 보이는 단락 빨간색하게 http://jsfiddle.net/qnuxs/3/

5 초마다. 5 초 동안 스크롤하여 나머지 단락이 빨간색이 아님을 볼 수 있습니다.

또 다른 DEMO : 스크롤하면서 http://jsfiddle.net/qnuxs/4/

이 버전은 색상을 업데이트합니다.

계산이 잘못되어 픽셀이 약간 떨어져 있지만 시작하기에 충분해야합니다. div에 .innerHeight()를 사용하거나 다른 것을 바꿀 필요가있을 것입니다. 그러나 이것은 생각입니다 : 보이는 부분의 위와 아래를 계산하기 위해 스크롤 위치와 div 높이를 얻고, 그 값을 상단과 하단 좌표 (상대 div로 이동)하고 올바른 범위 내의 필터 만 선택하도록하십시오.

http://jsfiddle.net/qnuxs/5/

편집 :

출처

2011-03-13 05:00:52 rsp

입력 +1 주셔서 감사합니다. – Pinkie

오버플로 숨겨진 jQuery 선택기

답변

관련 문제