📜  页面滚动反应 js - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:03:25.609000             🧑  作者: Mango

代码示例1
// ES6 Imports
import * as Scroll from 'react-scroll';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

// Or Access Link,Element,etc as follows
let Link      = Scroll.Link;
let Button    = Scroll.Button;
let Element   = Scroll.Element;
let Events    = Scroll.Events;
let scroll    = Scroll.animateScroll;
let scrollSpy = Scroll.scrollSpy;

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

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

var Section = React.createClass({
  componentDidMount: function() {
    Events.scrollEvent.register('begin', function(to, element) {
      console.log('begin', arguments);
    });

    Events.scrollEvent.register('end', function(to, element) {
      console.log('end', arguments);
    });

    scrollSpy.update();
  },
  componentWillUnmount: function() {
    Events.scrollEvent.remove('begin');
    Events.scrollEvent.remove('end');
  },
  scrollToTop: function() {
    scroll.scrollToTop();
  },
  scrollToBottom: function() {
    scroll.scrollToBottom();
  },
  scrollTo: function() {
    scroll.scrollTo(100);
  },
  scrollMore: function() {
    scroll.scrollMore(100);
  },
  handleSetActive: function(to) {
    console.log(to);
  },
  render: function () {
    return (
      
Test 1 Test 2 (delay) Test 6 (anchor) test 1 test 2
test 6 (anchor)
Go to first element inside container Go to second element inside container
first element inside container second element inside container
To the top!
To the bottom!
Scroll to 100px from the top
Scroll 100px more from the current position!
); } }); React.render(
, document.getElementById('example') );