Question

我希望跟踪鼠标已滚动了多少，因此我可以依次用平滑的3d滚动替换网站上的本机滚动行为，同时仍然可以跟踪滚动了多少页面。

我看到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>

固定在车轮位置上的React Track-Translate3D

0 个答案: