반작용 scrollTo/요소/구성 요소

위로하는 코드 스크롤의 다음 부분의 Y 위치를 얻을 수 있으며 지연 허용합니다반작용 scrollTo/요소/구성 요소

const ScrollToTop = React.createClass({ 
    getInitialState: function() { 
    return {intervalId: 0}; 
    }, 

    scrollStep: function() { 
    const top = 0; 

    if (window.pageYOffset === top) { 
     clearInterval(this.state.intervalId); 
    } 
    window.scroll(top, window.pageYOffset - this.props.scrollStepInPx); 
    }, 

    scrollToTop: function (event) { 
    event.preventDefault(); 

    const intervalId = setInterval(this.scrollStep, this.props.delayInMs); 

    this.setState({intervalId: intervalId}); 
    } 
});

이 어떻게 비슷한 일을 달성하지만 내 기본 탐색을 사용 할 수 있습니다? 요소의 오프셋을 계산하는 방법이 있습니까? 그런 다음 위로을 전달하는 대신 을 전달할 수 있습니다.

출처

2017-02-16 Manu

기본 탐색을 사용하면 무엇을 의미합니까? – juancab

@juancab 앱에서 내비게이션을 사용하여 클릭시 적절한 섹션 (예 : 집, 정보, 연락처 등)으로 스크롤하고 싶습니다. ** scrollIntoView **에서 작동하지만 ** 부드러운 동작은 ** Firefox **에서만 작동하므로 스크롤보다는 점프가됩니다. – Manu

라이브러리를 사용하여이를 달성하십시오.

react-scroll을 살펴보십시오. 기본 스크롤 및 부드러운 스크롤에 대한 지침입니다.

Live example을 사용할 수 있습니다. 그게 효과가 있다면 read the usage guidelines.

출처

2017-02-17 21:33:37

이전에 (다른 라이브러리와 마찬가지로) 이것을 검사했습니다. 나는 도서관이 필요없는 접근법을 찾고 있었다. 나는 그것에 대해 생각할 것이다, 고마워! – Manu

이 문제를 해결하기 위해 타사 라이브러리를 사용합니다. 주류가 아니기 때문에 반응 스크롤과 같은 작은 유틸리티가 두통을 덜어줍니다. 추신 : 귀하의 문제가 해결되면 녹색 체크 표시를 클릭하여 친절하게 [내 대답 수락] (https://meta.stackexchange.com/a/5235/343165)을 부탁드립니다. 이것은 당신이 솔루션을 발견했다는 것을 넓은 지역 사회에 알리고, 당신과 나에게 약간의 평판을 주며, 당신의 질문에주의를 기울임으로써 비슷한 이슈를 경험하는 사람들을 도울 것입니다. –

반작용 scrollTo/요소/구성 요소

답변

관련 문제