2014-05-11 7 views
0

무한 스크롤을 사용하여 replaceState()을 구현하는 데 어려움을 겪은 후 무한 Ajax 스크롤을 구입하기 만하면됩니다. 당신이 알다시피무한 Ajax 스크롤 : 역사와 어려움

function infiniteScroll() { 
    // Init infinite scroll 
    var ias = $.ias({ 
     container: '#masonry-filter', 
     item:  '.post', 
     pagination: '.nav-links', 
     next:  '.nav-previous a' 
    }); 

    // Run isotope on additional load 
    ias.on('render', function(newElements) { 
     $(newElements).css({ opacity: 0 }); 
    }); 
    ias.on('rendered', function(newElements) { 
     $('#masonry-filter').isotope('appended', $(newElements)); 
    }); 

    ias.extension(new IASTriggerExtension({ offset: 100 })); 
    ias.extension(new IASPagingExtension()); 
    ias.extension(new IASHistoryExtension({prev: '.nav-next a' })); 
} 

내가 Metafizzy의 동위 원소 플러그인과 함께이를 사용하고 있습니다 : 나는 다음과 같은 코드가 제대로 작동하도록 설정 모든 것을 얻을 관리했다. 나는 또한 Wordpress에서 이것을 사용하고 있으며 이것을 전형적인 Wordpress 페이지 매김에 연결하고있다.

모든 것이 제대로 작동하는 것처럼 보이지만 의도 한대로 작동하지 않습니다. 제 가정은 http://tumbledry.org/처럼 다소 시간이 흐른 후 페이지를 떠나 브라우저를 다시 클릭하면 링크를 클릭 할 때와 정확히 동일한 위치로 사용자를 이동시킵니다. 플러그인은 WordPress가 기본적으로 페이지 매김 (example.com/page/2)에 사용하는 URL 구조와 동일한 replaceState()을 사용하는 것 같습니다. 이것이 의도적으로 이루어 졌는지 아니면 우연인지는 알 수 없습니다. 그 결과, 게시물을 클릭 한 다음 브라우저의 뒤로 버튼을 누르면 사실상 example.com/page/2 페이지로 이동합니다. 여기에는 페이지 상단에 최신 게시물을 표시하는 버튼이 있습니다. . 그것은 원래의 게시물 페이지 나 내가 클릭 한 포스트가있는 페이지의 정확한 지점으로 이동하지 않습니다 (일반적으로 페이지의 맨 아래로 이동합니다). 또한 페이지 상단의 버튼을 클릭하여 최신 게시물을 표시하면 내 코드에서 볼 수 있듯이 페이지 하단에 최신 게시물이 추가됩니다.

나는 비틀 거리는 블로그 작품으로 작동하고 싶습니다. 링크를 클릭 한 다음 뒤로 버튼을 클릭하면 페이지의 정확한 지점으로 이동하여 새로운 게시물을로드 할 필요가 없습니다. 이것이 가능한지 또는 구현을 망쳤다면 알려주십시오. 내가 원하는 방식으로 작동하도록하는 방법을 알고 싶기 때문에 기능에 대한 심층적 인 정보를 매우 높이 평가할 것입니다.

답변

0

인피니트 AJAX 스크롤은 다른 방식으로 뒤집습니다. 최신 페이지를로드하지만 바닐라 설정에서 "추가로드"링크를 클릭하면 이전 페이지의 항목이 미리 추가됩니다. 현재 rendered 청취자는 이것을 고려하지 않습니다.

또한 뒤로 버튼을 누르면 이전 버전의 대략적인 오프셋으로 돌아 오지만 정확하지는 않습니다. 서버 측 코드를 사용하는 고급 설정이 필요하며이 플러그인의 목적을 무효로합니다. 서버 측 코딩없이 무한 스크롤을 간단하게 점진적으로 향상시킬 수 있습니다. http://tumbledry.org/2011/05/12/screw_hashbangs_building

0

무한 AJAX 스크롤 한 후 다른 접근 방식 tumbledry에 하나를 취합니다

이 경우 당신은 정말 그 저자는 자신의 구현에 대한 자세한 게시물을 갖고, 정확한은 tumbledry처럼 작동합니다. 최신 페이지를로드하지만 바닐라 설정에서 "추가로드"링크를 클릭하면 이전 페이지의 항목이 미리 추가됩니다. 현재 렌더링 된 리스너는 이것을 고려하지 않습니다.

감사합니다.

또한 뒤로 버튼을 누르면 이전 버전의 대략적인 오프셋으로 돌아 오지만 정확하지는 않습니다. 서버 측 코드를 사용하는 고급 설정이 필요하며이 플러그인의 목적을 무효로합니다. 서버 측 코딩없이 무한 스크롤을 간단하게 점진적으로 향상시킬 수 있습니다.

나는 이것이 완벽하지는 않을 것이라는 것을 이해하지만, 항상 페이지 하단 (무한 스크롤 밑에있는 꼬리말 영역)으로 되돌아 간다.히스토리 기능을 사용하면서 버튼을 사용하여 무한 스크롤을 트리거해야한다고 생각합니까? 이미 자신의 게시물을 겪었 내 자신의 롤을 시도했기 때문에 나는이 문제를 제기 http://tumbledry.org/2011/05/12/screw_hashbangs_building

:

이 경우 당신은 정말 그 저자가 자신의 구현에 대한 자세한 게시물을 갖고, 정확한 tumbledry처럼 작동합니다 성공하지 못한 무한의 두루마리.

IMHO 역사 기능을위한 UX는 설득력있게 WP 서버 측 기능을 통합했지만 약간 이상합니다. Wordpress 페이지에 착륙 페이지를 클릭했을 때 원래 페이지에 있던 게시물을 표시하려면 버튼을 클릭해야합니다. 플러그인은 훌륭하고 당신이 사용할 수있는 기술/기능을 사용하고 있다는 것을 알고 있습니다. 이제는 "역사"를 사용하는 대신 기본 기능을 사용하는 방법을 고수 할 것입니다.