Фиксированная позиция на гусеничном ходу - Translate3D - PullRequest
Новая
       13

Фиксированная позиция на гусеничном ходу - Translate3D

0 голосов
/ 04 апреля 2019

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

Я вижу, что deltaY отмечает направление / длину текущей прокрутки, но не обязательно полную прокрутку с момента загрузки страницы - которая затем может быть использована для отслеживания того, сколько было прокручено с использованием высоты внутренних элементов. Кто-нибудь имеет опыт работы с этим или использовал библиотеку для отслеживания поведения колес в React или Vanilla JS. 

function getList() {
  const list = [];
  for(let i = 0; i <= 2000; i++) {
    list.push('data');
  }

  return list;
}

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

    this.state = {
      style: {
        transform: 'translate3d(0,0,0)'
      }
    };
  }
  
  onWheel(e) {
   /* translate div container to move body in 3d plane
   console.log(e.deltaY);
   this.setState({
      style: {
        transform: 'translate3d(0, ?, 0)'
      }
    }); */
  }
  
  render() {
    return (
    	<div 
        onWheel={e => this.onWheel(e)} 
        className="outer"
        style={this.state.style}
       >
    	  <div className="outer--inner">
    	    <ul>
    	      {getList().map((val, index) => 
            	<li key={index}>{val} {index}</li>
            )}
    	    </ul>
    	  </div>
    	</div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
html,
body,
#root {
  height: 100%;
  overflow:hidden;
}

.outer {
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: auto;
  margin: 0;
  will-change: transform;
  width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<html>

  <div id="root">
    <!-- This element's contents will be replaced with your component. -->
  </div>
...