React.js'de onScroll bileşeninin stilini güncelleme

React'te, bir paralaks efekti oluşturmak için pencere kaydırmasında kendi stilini güncellemesi gereken bir bileşen oluşturdum.

Bileşen renderyöntemi şuna benzer:

  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>
    );
  }

Bu işe yaramaz çünkü React bileşenin değiştiğini bilmiyor ve bu nedenle bileşen yeniden oluşturulmuyor.

Değerini itemTranslatebileşenin durumunda depolamayı setStateve kaydırma geri aramasında çağırmayı denedim . Ancak bu, son derece yavaş olduğu için kaydırmayı kullanılamaz hale getirir.

Bunun nasıl yapılacağına dair herhangi bir öneriniz var mı?

Dinleyiciyi bağlamanız gerekir componentDidMount, bu şekilde yalnızca bir kez oluşturulur. Stili durumda saklayabilmelisiniz, muhtemelen performans sorunlarının nedeni dinleyiciydi.

Bunun gibi bir şey:

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
    });
},

onScrollReact öğesindeki etkinliğe bir işlev iletebilirsiniz : https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

Benzer başka bir cevap: https://stackoverflow.com/a/36207913/1255973

Duyarlı bir gezinme çubuğu oluşturma çözümüm (konum: kaydırılmadığında 'göreli' ve kaydırırken sabit ve sayfanın üst kısmında değil)

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}}
        >

Benim için performans sorunu yok.

Austins cevabını kullanırken gecikmeli davranış / performans sorunlarını fark eden ve yorumlarda bahsedilen referansları kullanarak bir örnek isteyen herkese yardımcı olmak için, bir sınıfı yukarı / aşağı kaydırma simgesi için değiştirmek için kullandığım bir örnek:

Render yönteminde:

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

İşleyici yönteminde:

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');
  }
}

Ve işleyicilerinizi Austin'in bahsettiği şekilde ekleyin / kaldırın:

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

referanslarla ilgili belgeler .

Doğruyu şu şekilde geçmedikçe olay dinleyicisini başarıyla ekleyemeyeceğimi anladım:

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

Kullanıldığı bir örnek classnames , tepki kancalar useEffect , USESTATE ve tarz-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

kancalı

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

function MyApp () {

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

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

  console.log(offset); 
};

UseEffect kullanarak işlev bileşeni örneği:

Not : useEffect'te bir "temizleme" işlevi döndürerek olay dinleyicisini kaldırmanız gerekir. Yapmazsanız, bileşen her güncellenişinde ek bir pencere kaydırma dinleyicisine sahip olacaksınız.

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>
  );
}

İlgilendiğiniz şey, kaydırılan bir alt bileşense, bu örnek yardımcı olabilir: 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>
    )
  }
}

Buradaki bahsim, çözmek için yeni kancalara sahip Fonksiyon bileşenlerini kullanmak, ancak useEffectönceki cevaplarda olduğu gibi kullanmak yerine , doğru seçeneğin useLayoutEffectönemli bir nedenden dolayı olacağını düşünüyorum :

İmza, useEffect ile aynıdır, ancak tüm DOM mutasyonlarından sonra senkronize olarak tetiklenir.

Bu, React belgelerinde bulunabilir . Kullandığımız takdirde useEffectyerine biz sayfasını zaten kaydırılan yanlış olacaktır kaydırılan ve bizim sınıf istenmeyen davranışa neden uygulanmayacaktır yeniden yükleyin.

Bir örnek:

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>
  )
}

Soruna olası bir çözüm https://codepen.io/dcalderon/pen/mdJzOYq olabilir.

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 değişkenlerini kullanarak ve değiştirerek sorunu çözdüm. Bu şekilde, performans sorunlarına neden olan bileşen durumunu değiştirmek zorunda kalmayacağım.

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);
}

İşte HOOKS fontAwesomeIcon ve Kendo UI React kullanan başka bir örnek
[! [Ekran görüntüsü] [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 ile bir cevap için güncelleme

Bunlar iki kancadır - biri yön için (yukarı / aşağı / yok) ve diğeri gerçek konum için

Bunun gibi kullanın:

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

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

İşte kancalar:

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'in cevabını genişletmek için kurucunuza eklemelisiniz 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
    });
},
...

Bu handleScroll(), olay dinleyicisinden çağrıldığında uygun kapsama erişim sağlar .

Ayrıca .bind(this), addEventListenerveya removeEventListeneryöntemlerinde bunu yapamayacağınızı unutmayın, çünkü her biri farklı işlevlere referanslar döndürecektir ve bileşen ayrıldığında olay kaldırılmayacaktır.