무제한 x- 반복 및 페이지 무제한 스크롤

Question

나는 언젠가 저를 괴롭 히고 있습니다.

div 세로로 쌓인 두 개가 있다고 가정 해 보겠습니다. 나는 그들 중 5 명이 있다고 가정 해 봅시다. 내가 원하는 건 thoth 5 div의 반복이다 (예 : CSS, background-repeat:repeat-y).

이 웹 사이트의 의미는 다음과 같습니다. https://duroc.ma. 페이지를 끌면 내용이 끝없이 반복되는 것처럼 보입니다. x과 y 방향에 있지만, 단지 y 방향을 사용하여 dragging 대신 scroll이 가능하도록하고 싶습니다.

이제는 jQuery으로이 카테고리를 선택할 수 있다는 것을 알고 있습니다. 나는 정말로 나이를 찾고 있었지만, 발견 된 것은 모두 'endless scroll'의 원칙입니다. 즉, 다음 페이지로 이동하는 대신 새로운 내용으로 계속 스크롤 할 수 있습니다.

누군가 내가 할 일이 무엇인지 알려 줄 수 있습니까? 아니면 적어도 올바른 방향으로 나를 움직일 수있는 출발점이 될까요?

감사합니다. 건배

Answer 1

JavaScript로 해결 방법을 시도하십시오. 내 예제는 스크롤 다운에서만 작동하며 필요한 경우 위로 스크롤하면 쉽게 업데이트 할 수 있습니다.

var parent = document.querySelector('.parent'); 
 

 
parent.addEventListener('scroll', endlessScroll); 
 

 
function endlessScroll() { 
 
    var height = 0; 
 
    for (var i = 0; i < parent.children.length; i++) { 
 
    height += parent.children[i].clientHeight; 
 
    } 
 
    var firstChild = parent.firstElementChild; 
 
    if (parent.scrollTop >= height - parent.clientHeight) { 
 
    parent.appendChild(firstChild); 
 
    parent.scrollTop -= firstChild.clientHeight; 
 
    } 
 
}

.parent { 
 
    height: 300px; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 

 
.parent div { 
 
    height: 150px; 
 
} 
 

 
.one { 
 
    background: red; 
 
} 
 

 
.two { 
 
    background: yellow; 
 
} 
 

 
.three { 
 
    background: green; 
 
}

<div class="parent"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
</div>

업데이트

은 : 지금은 모든 브라우저에서 작동합니다.