Onscroll реагируют на шокирующие блоки - PullRequest
Новая
       26

Onscroll реагируют на шокирующие блоки

0 голосов
/ 27 октября 2018

Я создал пользовательское событие onScroll ссылка , которое можно разделить на 3 части 

    handleScroll = () => {
    const scrolled =window.pageYOffset || document.documentElement.scrollTop;
    const hiddenpart = 100
    const notMoving = 700
    if(scrolled <= hiddenpart) {
        this.section0.style.transform = `translateY(${scrolled}px)`
        this.section1.style.transform = `translateY(${scrolled * 2}px)`
        this.footer.style.transform = `translateY(${scrolled * 2}px)`
    }
    if(scrolled <= notMoving && scrolled > hiddenpart) {

        this.section0.style.transform = `translateY(${scrolled}px)`
        this.section1.style.transform = `translateY(${scrolled + 100}px)`
        this.footer.style.transform = `translateY(${scrolled + 100}px)`
    }
    if(scrolled > notMoving) {
        this.section0.style.transform = `translateY(${700}px)`
        this.section1.style.transform = `translateY(${800}px)`
        this.footer.style.transform = `translateY(${800}px)`
    }
}

рендер 

  render() {
return (
  <div className="App">
    <section className='first' ref={section => {this.section0 = section}}>
        <img src="https://www.matrony.ru/wp-content/uploads/5490.jpg" alt=""/>
    </section>
    <section className='second' ref={section1 => {this.section1 = section1}}>
    </section>
    <section className='footer' ref={footer => {this.footer = footer}}>  
    </section>
  </div>
);}

1) на свитке до 100px Iпоказать скрытую часть изображения (первая секция не движется, вторая секция опускается в соответствии со свитком)

2) при прокрутке от 100 до 700 пикселей все не движется

3)после 700px все падает

И на моем рабочем столе все работает нормально, но когда я перехожу в адаптивный режим или пытаюсь прокрутить сенсорную панель на MacBook, мои секции дрожат, и я не могу понять, что происходит

Кроме того, я попытался сделать это с фиксированной / статической позицией в первом разделе и на верхних полях во втором и первом (все было хуже)

Может кто-нибудь предложить способ создать такое поведение безпрыгающие блоки ???

...