브라우저가 오버플로로 분류 할 첫 번째 단어 찾기

Question

스크롤이없는 페이지를 빌드하고 기본 div의 내용이 오버플로하는 부분을 인식합니다. 코드는 그 점을 기억하고 그 단어 또는 요소에서 시작하는 별도의 페이지를 구성합니다.

나는 바이올린을 켜는 몇 시간을 소비하고, 여기에 과거 질문이 채택 접근 방법의 한 : 클론의 높이/폭이 원래의보다 작아 아웃까지

1. 복제 사업부가 점진적으로 단어를 제거합니다.
너무 느립니다. 나는 기하 급수적으로 단어를 제거한 다음 천천히 그것을 다시 채우는 것으로 속도를 높일 수 있다고 생각합니다. 목표를 지나서 천천히 되돌아 와서 천천히 되돌릴 수 있습니다. 그러나 접근 자체는 무차별 한 것 같습니다.

2. div의 크기에 대한 계산을 수행하여 수평 및 수직으로 맞출 수있는 em 수를 계산합니다. 모든 내용이 균일 한 텍스트라면 책이 좋겠지 만 헤드 라인과 이미지 및 이것 저것에 원숭이 렌치를 던지는 등주를 다루기를 기대합니다. 또한 브라우저의 다른 기본 글꼴 환경 설정 (100 % ~ 144 %?)을 사용하면 복잡해집니다.

3. 항목을 토큰으로 렌더링하고 해당 요소 (예 : 한 문자)가 화면에서 더 이상 보이지 않을 때 중지하십시오. 렌더링 된 요소에 어떤 종류의 isVisible() 검사 만 포함되기 때문에이 방법을 선호합니다. 브라우저가 렌더링하는 방법과 일치하는지는 모르겠다.

어떻게 수행 할 수 있는지에 대한 권장 사항은 무엇입니까? 또는 스크롤바가 필요한지 여부를 결정하기 전에 전체 페이지 길이를 렌더링하도록 설계된 브라우저입니까?

Answer 1

div를 복제하는 대신 overflow:hidden div 일 수 있으며 '페이지'를 넘길 때마다 div.scrollTop += div.height을 설정할 수 있습니다. 브라우저가 스크롤바를 표시하지 않더라도 div를 프로그래밍 방식으로 스크롤 할 수 있습니다.

이렇게하면 브라우저에서 이 처리 할 내용을 디자인하게됩니다 (내용 흐름).. (demo)

var div = $('#pages'), h = div.height(), len = div[0].scrollHeight, p = $('#p'); 
setInterval(function() { 
    var top = div[0].scrollTop += h; 
    if (top >= len) top = div[0].scrollTop = 0; 
    p.text(Math.floor(top/h)+1 + '/' + Math.ceil(len/h)); // Show 'page' number 
}, 1000); 

또한 일부는 '페이지'는 블록 레벨 요소 경우의 중간에 시작되지 않습니다 있는지 확인 하구 할 수있는 : 여기

자동으로 페이지를 통해 진행하는 조각이다 당신은 (예를 들어) 헤드 라인을 반으로 줄이기를 원하지 않습니다. 불행히도 텍스트 줄이 절반으로 분리되지 않도록하는 것이 더 어려울 것입니다 (아마도 불가능할 수도 있습니다).