Реализация плавной прокрутки в React - PullRequest
Новая
       155

Реализация плавной прокрутки в React

0 голосов
/ 10 июля 2020

Я пытаюсь создать для себя веб-сайт, и когда вы нажимаете на изображение, страница прокручивается вниз до другого элемента в другом разделе.

Структура моего кода теперь такова, что у меня есть Класс приложения, и в этом классе я создаю два других компонента, назовите их A и B. 

class App extends Component{
   render () { 
      return (<A/>
              <B/>)
}

Изображение, которое нажимает пользователь, находится в компоненте A, а элемент, который я хочу прокрутить, находится в B. I ' Мы пытались сделать это с помощью функции element.scrollIntoView, создав такую ​​ссылку: 

class App extends Component{
    constructor(props){
        super(props);

        this.divToFocus = React.createRef();
    }
    

    handleOnClick = () =>{
        this.divToFocus.scrollIntoView({behavior: 'smooth'}
    }

    render () {
        return (
        <div>
            <A click={this.handleOnClick}/>
            <B name={this.divToFocus} />
        </div>)}

и в A, используя handleOnClick для атрибута img onClick (обязательно установите "pointer-events": "all" для стиля), а затем создал div со ссылкой this.divToFocus в B, но получил ошибку типа, говорящую, что this.divToFocus.scrollIntoView не является функцией.

Я также попытался использовать react-scroll, выполнив что-то вроде этого: 

class A extends Component{
    render (){ 
        return (
        <Element name={"name"}>
            Hello world!
        </Element>
    )}
}

class B extends Component{
    render (){ 
        return (
        <Link activeClass="active" to="name" spy={true} smooth={true} offset={50} duration={500}>
          <img src={arrow} />
        </Link>
    )}
}

но тогда ничего не происходило, когда я нажимал на изображение. Мы будем благодарны за любые советы о том, как это сделать!

1 Ответ

0 голосов
/ 10 июля 2020

Вы можете использовать DOM и ScrollIntoView , чтобы достичь этого.

A.js

import React from "react";

export default function A() {
  const handleImageClick = () => {
    document.getElementById("myid").scrollIntoView({ behavior: "smooth" });
  };
  return (
      <img
        onClick={handleImageClick}
        alt="placeholder"
        src="https://via.placeholder.com/728x200.png?text=Visit+WhoIsHostingThis.com+Buyers+GuideC/O https://placeholder.com/"
      />
  );
}

B.js

import React from "react";

export default function B() {
  return (
    <div id="myid">
      <h1>Hello CodeSandbox</h1>
      <h2>Some Long content for scroll to happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>

    </div>
  );
}

Codesandbox демо здесь

...