Реагируйте на бесконечную прокрутку - показываются двойные полосы прокрутки - мне нужна только полоса прокрутки окна - PullRequest
Новая
       8

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

0 голосов
/ 20 мая 2018

Я пытаюсь реализовать бесконечную прокрутку для React.js.Все отлично работает, кроме Я хочу иметь возможность использовать полосу прокрутки окна, чтобы активировать бесконечную прокрутку.Код на данный момент имеет 2 полосы прокрутки (мне нужна только одна).

Код от stackoverflow ответил здесь, я прочитал его полный ответ, я попытался установить высоту на 100%, но он делает бесконечнымпрокрутка не работает.: Stackoverflow - отвечает Аникет Джа, (самый длинный ответ с 4 ответами)

  • Двойная прокрутка происходит, когда я делаю это таким образом: 

    <div>
<First />
 <div ref="iScroll" style={{ height: "100vh", overflow: "auto"}}>
    <ul>
      {this.displayItems()}
    </ul>
    {this.state.loadingState ? <p className="loading"> loading More 
     Items..</p> : ""}
  </div>
</div>

У меня есть ссылка на Codepen, если это поможет 

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
     if(this.state.loadingState){
         return;
     }
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 1000);
  }

  render() {
    return (<div>

        <First />
          <div ref="iScroll" style={{ height: "100vh", overflow: "auto"}}>
            <ul>
              {this.displayItems()}
            </ul>
            {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}
          </div>
        </div>
    );
  }
}

class First extends React.Component {
  constructor(props) {
   super(props);
   this.state = {

    };
  }

  render() {
    return (
      <h1>Testing</h1>

    )
  }
}

ReactDOM.render(<Layout />, document.getElementById('example'));

1 Ответ

0 голосов
/ 20 мая 2018

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

В коде ручки у вас есть height: '100%' для вашегопрокруткаЭто стилирует div так, что ему не нужно прокручивать, поэтому бесконечная прокрутка не работает.

Если вы стилизуете этот div так, чтобы он занимал меньше высоты доступного видового экрана и отображал достаточноэлементы, чтобы заполнить его, бесконечная прокрутка будет работать нормально.

Если вы затем стилизуете комбинацию div заголовка так, чтобы они точно вписывались в доступное пространство области просмотра, вы не получите вторую полосу прокрутки.

Ниже представлен вариант, который вы должны сделать.Что я сделал, так это установил высоту элемента прокрутки равным высоте окна просмотра (100vh) минус 100px.Это не совсем точно рассчитано, но вы хотите вычесть пространство, необходимое для заголовка, из размера области просмотра.

Эта реализация хорошо работает и для меня, и для вас тоже. 

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
	 if(this.state.loadingState){
		 return;
	 }
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 1000);
  }
  
  render() {
    return (<div>
     
        <First />
          <div ref="iScroll" style={{ height: "calc(100vh - 100px)", overflow: "auto"}}>
            <ul>
              {this.displayItems()}
            </ul>
            {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}
          </div>
        </div>
    );
  }
}

class First extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
    
    };
  }

  render() {
    return (
      <h1>Testing</h1>

    )
  }
}

ReactDOM.render(<Layout />, document.getElementById('example'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="example"></div>
...