React.js:如何访问滚动框的属性(水平偏移) [英] Reactjs: How can access property of scrollbox (horizontal offset)

问题描述

我以这种方式具有滚动视图:一系列水平包装在容器上的视图.

I have a scroll view in this fashion: a succession of views wrapped horizontally on a container.

      <div id="scroller"  ref="scroller" onClick=
{this.onClick.bind(this)} onMouseMove={this._onMouseMove.bind(this)}>
                {this.state.pma.map((Item, index) => (
                  <this.state.typePma
                    key           = {index}
                    pma           = {Item}
                    onDateChange  = {(child)  => this.onDateChange(child)}
                    redisplay     = {()       => this.redisplay()}
                    />
                  ))}
              </div>

我想知道如何获取滚动视图的水平偏移并以编程方式对其进行操作:我想用鼠标进行简单的拖动来移动滚动视图.目前，该行为是我需要拖动水平滑动条，但是如果我在视图上尝试相同的操作将不起作用.

I'd like to know how I can get the horizontal offset of the scrollview and manipulate it programmatically: I'd like to move my scrollview with simple drag with the mouse. For the moment, the behavior is that I need to drag the horizontal slidebar but that don't work if I try the same on the view.

推荐答案

我真的不确定您要寻找什么，但是如果您正在寻找一种控制滚动行为以延迟加载应用程序的方法，那么对于例如，如果用户到达滚动条的底部要加载更多数据，则可以这样做.

I am really not sure what you are looking for, but if you are looking for a way to control the scroll behavior for lazy loading in your app, so for e.g, if the user reach the bottom of the scroll you want to load more data, you can do it like this.

class ScrollablePage extends Component {

  componentDidMount() {
    // Add Scroll Event After The UI Has Been rendered
    window.addEventListener("scroll", this.onHandleScrollEvent);
  }

  onHandleScrollEvent = () => {   
    const el = document.body;
    /*
     * el.scrollTop => This tells us how much a user has scrolled from up
     * Math.ceil(el.scrollTop) => returns value in whole rather then float
     */

    // this will start paginating when there is a difference of 100px from bottom
    const bottomSpace = 100; 
    const bottomReachLimit = Math.ceil(el.scrollTop) + (bottomSpace); 
    if (el.scrollHeight - el.clientHeight <= bottomReachLimit) {
        // console.log('Bottom reached, starting pagination');
        // Do your magic here when reached bottom
    } else { 
       // console.log('Bottom not reached');
    }
  }

  render () {
     return (
       <div>
         {/* YOUR SCROLLABLE CONTENT HERE */}
       </div>
     );
  }

}

但是，如果您想通过代码控制Scroll行为，则可以执行以下操作.下面编写的代码将滚动到componentDidMount()上页面的底部，但这使您了解如何以命令方式控制滚动行为.

But if you want to control the Scroll behavior through code you can do something like this. The code written below will scroll to the bottom of the page on componentDidMount() but this gives you an idea how you can control the scroll behavior in an imperative way.

 import React, { Component } from 'react';
 import { findDOMNode } from "react-dom";

 class ScrollablePage extends Component {
    componentDidUpdate() {
      this.scrollToBottom();
    }

    scrollToBottom() {
       const el = findDOMNode(this)
       const scrollHeight = el.scrollHeight;
       const totalContainerHeight = el.clientHeight;
       const shouldScroll = scrollHeight - totalContainerHeight;

       const myInterval = setInterval(() => {
         if (shouldScroll > 0) {
           el.scrollTop = el.scrollTop + 70;
           if (el.scrollTop + el.clientHeight >= el.scrollHeight - 30) {
             clearInterval(myInterval);
           }
         }
       }, 20);
    }

    render () {
      return (
        <div>
           {/* YOUR SCROLLABLE CONTENT HERE */}
        </div>
      );
    }
 }

这篇关于React.js:如何访问滚动框的属性(水平偏移)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！