react实现左右分割滚动异向效果代码-html代码-BFW代码库

react实现左右分割滚动异向效果代码

代码语言：html

代码描述：react实现左右分割滚动异向效果代码，一个滚动条，滚动触发左右两侧内容超不同方向滚动。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
	margin: 0;
	color: #fff;
}
.outer-container {
	position: absolute;
	height: 100dvh;
	width: 100dvw;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	font:
		700 60px/1.25 system-ui,
		sans-serif;
	background: rgba(0, 0, 200, 1);
}
.column {
	height: 100%;
	padding: 1em;
	overflow: scroll;
}
.outer-container::before,
.outer-container::after {
	position: absolute;
	content: '';
	height: 20%;
	width: 50%;
	z-index: 1;
}
.outer-container::before {
	bottom: 0;
	left: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 200, 0) 0%,
		rgba(0, 0, 200, 1) 100%
	);
}
.outer-container::after {
	top: 0;
	left: 50%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 200, 0) 0%,
		rgba(0, 0, 200, 1) 100%
	);
}
</style>


  
  
</head>

<body translate="no">
  <div id="app"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
      <script  type="text/babel">


const {useCallback, useRef} = React;

const App = () => {
	const rightColumnRef = useRef(null);
	const leftColumnRef = useRef(null);

	const rightColumnFnRef = useCallback((el) => {
		rightColumnRef.current = el;
		if (!el) return;
		window.setTimeout(() => {
			el.scrollTop = el.scrollHeight;
		}, 15);
	});

	const handleLeftScroll = useCallback((e) => {
		if (!rightColumnRef.current) return;
		rightColumnRef.current.scrollTop =
			e.target.scrol.........完整代码请登录后点击上方下载按钮下载查看