Question

我一直在尝试将反应滚动库与我的HTML一起使用，以便能够点击一个由div组成的多维数据集，向下滚动到页面的另一部分。

我的反应滚动代码是：

var React = require('react');
var Scroll = require('react-scroll');

var Link = Scroll.Link;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;


var Section = React.createClass({
      componentDidMount: function() {
        scrollToElement(link1); {
          let scroller = Scroll.scroller;
          scroller.scrollTo(link1, {
              duration: 1500,
              delay: 100,
              smooth: true,

            },
          )
        }
      },


    ///

    render( < App / > , document.getElementById('app'));

我正在尝试在HTML中滚动到这个元素：

<Element name="link1">
  <div class="bg2" id="snap1"></div>
</Element>

点击其中一个立方体时：

<div class="cube" change-background colorcode=¨#f45642¨>
  <div class="front"><span>Resume</span></div>
  <div class="back"></div>
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

我做了这个小提琴https://jsfiddle.net/zhenkgxz/8/，但我是JSfiddle的新手，所以我不确定我是否正确设置了它。无论如何，如何在点击立方体时获得滚动动画？

如何使用React-Scroll滚动到点击元素？

0 个答案: