स्क्रॉल

Question

पर एक प्रतिक्रिया घटक कैसे प्रकट करें I मैंने एक निश्चित नौसेना के लिए एक प्रतिक्रिया घटक बनाया है जिसे मैं छिपाना चाहता हूं, जब तक कि मैं पृष्ठ पर किसी निश्चित बिंदु को पीछे नहीं स्क्रॉल करता, फिर दृश्य में स्लाइड करता हूं। Medium में एक हेडर है जो मैं वर्णन कर रहा हूं।

यह स्क्रूमैजिक या मार्ग बिंदुओं के साथ jQuery में अपेक्षाकृत मामूली कार्य है, लेकिन क्या यह रिएक्ट और वेनिला जेएस के साथ इसे पूरा करने का एक बेवकूफ तरीका है?

Answer 1

componentDidMount जीवन चक्र हुक में, jQuery लिंक आप दे दिया है के रूप में एक ही बात करते हैं:

class Navbar extends React.component { 

    let delta = 5; 

    render() { 
    return (
     <div ref=header></div> 
    ); 
    } 

    componentDidMount() { 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 

     if(Math.abs(this.state.lastScrollTop - st) <= delta) 
     return; 

     if (st > lastScrollTop){ 
     // downscroll code 
     // $(this.refs.header).css('visibility','hidden').hover() 
     this.setState({ 
      navbarVisible: false 
     }); 
     } else { 
     // upscroll code 
     $(this.refs.header).css('visibility','visible'); 
     this.setState({ 
      navbarVisible: true 
     }); 
     } 
     lastScrollTop = st; 
    }.bind(this)); 

    } 
} 

Answer 2

वेनिला जे एस jsfiddle साथ रास्ता प्रतिक्रिया;

EventListener को हटाने के लिए मत भूलना। इस उदाहरण में घटक यदि केवल यह आवश्यक

class TopBar extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state={isHide:false}; 
     this.hideBar = this.hideBar.bind(this) 
    } 
    hideBar(){ 
     let {isHide} = this.state 
     window.scrollY > this.prev? 
     !isHide && this.setState({isHide:true}) 
     : 
     isHide && this.setState({isHide:false}) 

     this.prev = window.scrollY; 
    } 
    componentDidMount(){ 
     window.addEventListener('scroll',this.hideBar); 
    } 
    componentWillUnmount(){ 
     window.removeEventListener('scroll',this.hideBar); 
    } 
    render(){ 
     let classHide=this.state.isHide?"hide":"" 
     return <div className={"topbar "+classHide}>topbar</div>; 
    } 
} 

Answer 3

आप इस तरह के react-headroom के रूप में एक घटक इस्तेमाल कर सकते हैं आप के लिए भारी उठाने करना है प्रस्तुत करना होगा। या, आप अभी भी componentDidMountlifecycle method में इसे सेट अप करने और componentWillUnmount का उपयोग करके इसे हटाकर, प्रतिक्रिया में मार्ग बिंदुओं का उपयोग कर सकते हैं।

Answer 4

मैंने इसी सटीक आवश्यकता के लिए एक प्रतिक्रिया घटक बनाया क्योंकि मुझे किसी भी अन्य कार्यान्वयन को नहीं मिला जो मुझे चाहिए था। यहां तक ​​कि react-headroom ने आपको कुछ भी नहीं दिया जो पृष्ठ पर किसी निश्चित बिंदु तक पहुंचने के बाद बस स्क्रॉल करेगा।

सार यहाँ है: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

मैं यहाँ घटक कोड कॉपी करने के लिए किसी भी कारण नहीं दिख रहा है। कोड काफी हद तक react-headroom कोड से बाहर है लेकिन इसलिए कम है और इसलिए सरल है।

घटक कोड का पहला भाग है, तो आप इसे कॉपी/पेस्ट कर सकते हैं और फिर इसे आयात कर सकते हैं। Navbar के साथ अपना कोड आयात करने के बाद इस तरह कुछ दिखाई देगा:

class MyScrollInNavBar extends Component { 
    render() { 
     return (
     <ScrollInNav scrollInHeight={150}> 
      <MyNavBar /> 
     </ScrollInNav> 
    ); 
    } 
}