อัปเดตรูปแบบของคอมโพเนนต์ onScroll ใน React.js

ฉันได้สร้างส่วนประกอบใน React ซึ่งควรจะอัปเดตสไตล์ของตัวเองในการเลื่อนหน้าต่างเพื่อสร้างเอฟเฟกต์พารัลแลกซ์

renderวิธีส่วนประกอบมีลักษณะดังนี้:

  function() {
    let style = { transform: 'translateY(0px)' };

    window.addEventListener('scroll', (event) => {
      let scrollTop = event.srcElement.body.scrollTop,
          itemTranslate = Math.min(0, scrollTop/3 - 60);

      style.transform = 'translateY(' + itemTranslate + 'px)');
    });

    return (
      <div style={style}></div>
    );
  }

วิธีนี้ใช้ไม่ได้เนื่องจาก React ไม่ทราบว่าส่วนประกอบมีการเปลี่ยนแปลงดังนั้นองค์ประกอบจึงไม่ได้รับการแสดงผล

ฉันได้ลองจัดเก็บค่าitemTranslateในสถานะของส่วนประกอบและเรียกsetStateในการเรียกกลับแบบเลื่อน อย่างไรก็ตามสิ่งนี้ทำให้การเลื่อนไม่สามารถใช้งานได้เนื่องจากช้ามาก

ข้อเสนอแนะเกี่ยวกับวิธีการทำสิ่งนี้หรือไม่?

คุณควรผูกผู้ฟังเข้าcomponentDidMountด้วยวิธีนี้จะสร้างเพียงครั้งเดียว คุณควรจะสามารถจัดเก็บสไตล์ในสถานะผู้ฟังอาจเป็นสาเหตุของปัญหาด้านประสิทธิภาพ

สิ่งนี้:

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},

คุณสามารถส่งผ่านฟังก์ชันไปยังonScrollเหตุการณ์บนองค์ประกอบการตอบสนอง: https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

คำตอบอื่นที่คล้ายกัน: https://stackoverflow.com/a/36207913/1255973

วิธีแก้ปัญหาของฉันในการสร้างแถบนำทางที่ตอบสนอง (ตำแหน่ง: 'ญาติ' เมื่อไม่เลื่อนและแก้ไขเมื่อเลื่อนและไม่อยู่ที่ด้านบนสุดของหน้า)

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(event) {
    if (window.scrollY === 0 && this.state.scrolling === true) {
        this.setState({scrolling: false});
    }
    else if (window.scrollY !== 0 && this.state.scrolling !== true) {
        this.setState({scrolling: true});
    }
}
    <Navbar
            style={{color: '#06DCD6', borderWidth: 0, position: this.state.scrolling ? 'fixed' : 'relative', top: 0, width: '100vw', zIndex: 1}}
        >

ไม่มีปัญหาด้านประสิทธิภาพสำหรับฉัน

เพื่อช่วยทุกคนที่สังเกตเห็นปัญหาด้านพฤติกรรม / ประสิทธิภาพที่ล้าหลังเมื่อใช้คำตอบของ Austins และต้องการตัวอย่างโดยใช้การอ้างอิงที่กล่าวถึงในความคิดเห็นนี่คือตัวอย่างที่ฉันใช้สำหรับการสลับคลาสสำหรับไอคอนเลื่อนขึ้น / ลง:

ในวิธีการแสดงผล:

<i ref={(ref) => this.scrollIcon = ref} className="fa fa-2x fa-chevron-down"></i>

ในวิธีการจัดการ:

if (this.scrollIcon !== null) {
  if(($(document).scrollTop() + $(window).height() / 2) > ($('body').height() / 2)){
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-up');
  }else{
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-down');
  }
}

และเพิ่ม / ลบตัวจัดการของคุณในลักษณะเดียวกับที่ Austin กล่าวถึง:

componentDidMount(){
  window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount(){
  window.removeEventListener('scroll', this.handleScroll);
},

เอกสารในrefs

ฉันพบว่าฉันไม่สามารถเพิ่มตัวฟังเหตุการณ์ได้สำเร็จเว้นแต่ฉันจะผ่านจริงเช่นนั้น:

componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll, true);
},

ตัวอย่างการใช้classNames , React hooks useEffect , useStateและstyled-jsx :

import classNames from 'classnames'
import { useEffect, useState } from 'react'

const Header = _ => {
  const [ scrolled, setScrolled ] = useState()
  const classes = classNames('header', {
    scrolled: scrolled,
  })
  useEffect(_ => {
    const handleScroll = _ => { 
      if (window.pageYOffset > 1) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }
    window.addEventListener('scroll', handleScroll)
    return _ => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])
  return (
    <header className={classes}>
      <h1>Your website</h1>
      <style jsx>{`
        .header {
          transition: background-color .2s;
        }
        .header.scrolled {
          background-color: rgba(0, 0, 0, .1);
        }
      `}</style>
    </header>
  )
}
export default Header

ด้วยตะขอ

import React, { useEffect, useState } from 'react';

function MyApp () {

  const [offset, setOffset] = useState(0);

  useEffect(() => {
    window.onscroll = () => {
      setOffset(window.pageYOffset)
    }
  }, []);

  console.log(offset); 
};

ตัวอย่างส่วนประกอบของฟังก์ชันโดยใช้ useEffect:

หมายเหตุ : คุณต้องลบตัวฟังเหตุการณ์โดยส่งคืนฟังก์ชัน "ล้างข้อมูล" ใน useEffect หากคุณไม่ทำทุกครั้งที่มีการอัปเดตส่วนประกอบคุณจะมีตัวฟังการเลื่อนหน้าต่างเพิ่มเติม

import React, { useState, useEffect } from "react"

const ScrollingElement = () => {
  const [scrollY, setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logit);
    };
  }, []);

  return (
    <div className="App">
      <div className="fixed-center">Scroll position: {scrollY}px</div>
    </div>
  );
}

หากสิ่งที่คุณสนใจเป็นส่วนประกอบลูกที่เลื่อนได้ตัวอย่างนี้อาจช่วยได้: https://codepen.io/JohnReynolds57/pen/NLNOyO?editors=0011

class ScrollAwareDiv extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.state = {scrollTop: 0}
  }

  onScroll = () => {
     const scrollTop = this.myRef.current.scrollTop
     console.log(`myRef.scrollTop: ${scrollTop}`)
     this.setState({
        scrollTop: scrollTop
     })
  }

  render() {
    const {
      scrollTop
    } = this.state
    return (
      <div
         ref={this.myRef}
         onScroll={this.onScroll}
         style={{
           border: '1px solid black',
           width: '600px',
           height: '100px',
           overflow: 'scroll',
         }} >
        <p>This demonstrates how to get the scrollTop position within a scrollable 
           react component.</p>
        <p>ScrollTop is {scrollTop}</p>
     </div>
    )
  }
}

การเดิมพันของฉันที่นี่คือการใช้ส่วนประกอบของฟังก์ชันกับตะขอใหม่ในการแก้ปัญหา แต่แทนที่จะใช้useEffectเหมือนในคำตอบก่อนหน้าฉันคิดว่าตัวเลือกที่ถูกต้องน่าจะuseLayoutEffectเป็นเหตุผลสำคัญ:

ลายเซ็นเหมือนกันกับ useEffect แต่จะเริ่มทำงานพร้อมกันหลังจากการกลายพันธุ์ DOM ทั้งหมด

นี้สามารถพบได้ในReact เอกสาร หากเราใช้useEffectแทนและเราโหลดเพจที่เลื่อนไปแล้วซ้ำการเลื่อนจะเป็นเท็จและคลาสของเราจะไม่ถูกนำไปใช้ทำให้เกิดพฤติกรรมที่ไม่ต้องการ

ตัวอย่าง:

import React, { useState, useLayoutEffect } from "react"

const Mycomponent = (props) => {
  const [scrolled, setScrolled] = useState(false)

  useLayoutEffect(() => {
    const handleScroll = e => {
      setScrolled(window.scrollY > 0)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  ...

  return (
    <div className={scrolled ? "myComponent--scrolled" : ""}>
       ...
    </div>
  )
}

วิธีแก้ปัญหาที่เป็นไปได้คือhttps://codepen.io/dcalderon/pen/mdJzOYq

const Item = (props) => { 
  const [scrollY, setScrollY] = React.useState(0)

  React.useLayoutEffect(() => {
    const handleScroll = e => {
      setScrollY(window.scrollY)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <div class="item" style={{'--scrollY': `${Math.min(0, scrollY/3 - 60)}px`}}>
      Item
    </div>
  )
}

ฉันแก้ปัญหาโดยใช้และแก้ไขตัวแปร CSS ด้วยวิธีนี้ฉันไม่ต้องแก้ไขสถานะส่วนประกอบซึ่งทำให้เกิดปัญหาด้านประสิทธิภาพ

index.css

:root {
  --navbar-background-color: rgba(95,108,255,1);
}

Navbar.jsx

import React, { Component } from 'react';
import styles from './Navbar.module.css';

class Navbar extends Component {

    documentStyle = document.documentElement.style;
    initalNavbarBackgroundColor = 'rgba(95, 108, 255, 1)';
    scrolledNavbarBackgroundColor = 'rgba(95, 108, 255, .7)';

    handleScroll = () => {
        if (window.scrollY === 0) {
            this.documentStyle.setProperty('--navbar-background-color', this.initalNavbarBackgroundColor);
        } else {
            this.documentStyle.setProperty('--navbar-background-color', this.scrolledNavbarBackgroundColor);
        }
    }

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    render () {
        return (
            <nav className={styles.Navbar}>
                <a href="/">Home</a>
                <a href="#about">About</a>
            </nav>
        );
    }
};

export default Navbar;

Navbar.module.css

.Navbar {
    background: var(--navbar-background-color);
}

นี่คืออีกตัวอย่างหนึ่งที่ใช้HOOKS fontAwesomeIcon และ Kendo UI React
[! [screenshot ที่นี่] [1]] [1]

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';


const ScrollBackToTop = () => {
  const [show, handleShow] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 1200) {
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener('scroll');
    };
  }, []);

  const backToTop = () => {
    window.scroll({ top: 0, behavior: 'smooth' });
  };

  return (
    <div>
      {show && (
      <div className="backToTop text-center">
        <button className="backToTop-btn k-button " onClick={() => backToTop()} >
          <div className="d-none d-xl-block mr-1">Top</div>
          <FontAwesomeIcon icon="chevron-up"/>
        </button>
      </div>
      )}
    </div>
  );
};

export default ScrollBackToTop;```


  [1]: https://i.stack.imgur.com/ZquHI.png

อัปเดตคำตอบด้วย React Hooks

นี่คือตะขอสองอัน - อันหนึ่งสำหรับทิศทาง (ขึ้น / ลง / ไม่มี) และอีกอันสำหรับตำแหน่งจริง

ใช้แบบนี้:

useScrollPosition(position => {
    console.log(position)
  })

useScrollDirection(direction => {
    console.log(direction)
  })

นี่คือตะขอ:

import { useState, useEffect } from "react"

export const SCROLL_DIRECTION_DOWN = "SCROLL_DIRECTION_DOWN"
export const SCROLL_DIRECTION_UP = "SCROLL_DIRECTION_UP"
export const SCROLL_DIRECTION_NONE = "SCROLL_DIRECTION_NONE"

export const useScrollDirection = callback => {
  const [lastYPosition, setLastYPosition] = useState(window.pageYOffset)
  const [timer, setTimer] = useState(null)

  const handleScroll = () => {
    if (timer !== null) {
      clearTimeout(timer)
    }
    setTimer(
      setTimeout(function () {
        callback(SCROLL_DIRECTION_NONE)
      }, 150)
    )
    if (window.pageYOffset === lastYPosition) return SCROLL_DIRECTION_NONE

    const direction = (() => {
      return lastYPosition < window.pageYOffset
        ? SCROLL_DIRECTION_DOWN
        : SCROLL_DIRECTION_UP
    })()

    callback(direction)
    setLastYPosition(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

export const useScrollPosition = callback => {
  const handleScroll = () => {
    callback(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

หากต้องการขยายคำตอบของ @ Austin คุณควรเพิ่มthis.handleScroll = this.handleScroll.bind(this)ในตัวสร้างของคุณ:

constructor(props){
    this.handleScroll = this.handleScroll.bind(this)
}
componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},
...

สิ่งนี้ทำให้handleScroll()สามารถเข้าถึงขอบเขตที่เหมาะสมเมื่อถูกเรียกจากผู้ฟังเหตุการณ์

นอกจากนี้โปรดทราบว่าคุณไม่สามารถทำ.bind(this)ในaddEventListeneror removeEventListenermethod ได้เนื่องจากแต่ละรายการจะส่งคืนการอ้างอิงไปยังฟังก์ชันที่แตกต่างกันและเหตุการณ์จะไม่ถูกลบออกเมื่อถอนการต่อเชื่อมคอมโพเนนต์