Html 5, 앵커 포인트 간 애니메이션

Question

나는 모든 콘텐츠가 하나의 긴 페이지에 있으며 사용자가 스크롤 할 수없고 내 사이트를 탐색해야하는 사업용 웹 사이트를 만드는 것에 대해 생각하고 있습니다. 버튼을 클릭하면 앵커 포인트 사이에서 다음 페이지로 움직입니다. 저는 사무실이되는 원점으로 긴 이미지를 만들 것입니다. 그러면 사용자는 하늘로 올라가 다른 페이지 공간을 차지할 수 있습니다. 그렇다면 어떻게 사용자가 스크롤 할 수 없게되고, 애니메이션을 만들거나 각 앵커 사이를 천천히 스크롤 할 수 있습니까? 수평으로도 스크롤 할 수 있습니까?

Answer 1

브라우저의 스크롤 기능을 일시적으로 사용 중지하여 문제를 해결하려고합니다. 키 누르기 또는 마우스 스크롤과 연관된 이벤트 리스너를 바인드 해제하여이 작업을 수행 할 수 있습니다.

마우스 스크롤이 이벤트 처리기와 연결된 기본 동작을 방지하여 트리거되도록 거부 할 수 있습니다. 기술적으로이 자바 스크립트에서 수행 할 수있는 방법입니다 :

window.onload = function() { 
    if (window.addEventListener) { 
     window.addEventListener('DOMMouseScroll', disableScroll, false); 
    } else if (window.attachEvent) { //IE event handler 
     window.attachEvent('DOMMouseScroll', disableScroll); 
    } else { 
     window.onscroll = disableScroll; 
    } 
} 

function disableScroll(event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
     event.preventDefault(); // prevent the default action to get triggered\ 
    } 
    event.returnValue = false; // IE method 
} 

var keys = [37, 38, 39, 40]; 
function onKeydown(event) { 
    var e = event || window.event; 
    for (var i = 0, len = keys.length; i < len; i++) { 
     if (e.keyCode == keys[i]) { 
      console.log("Forbidden event"); 
      e.preventDefault(); 
     } 
    } 
} 

document.onkeydown = onKeydown; 

은 그럼 당신은 앵커 포인트를 사용하여 클릭이 원하는 장소에 진출에 코드를 구성 할 수 있습니다. 그게 전부 야.