Javascript 两个div并联在一起
我在维持两个分区平行时面临问题 第一个div应该包含大数据，但使用浏览器滚动，第二个div应该包含小数据，并保持右侧固定 所以当用户滚动页面时，两个div都应该保持在parllel中 这里有一个类似的例子（例子）[ 在上面的页面中，当您在描述之后访问时，它显示了两个parllel div.。一个保持固定。另一个使用浏览器滚动条移动 编辑我的努力Javascript 两个div并联在一起,javascript,html,css,Javascript,Html,Css,我在维持两个分区平行时面临问题 第一个div应该包含大数据，但使用浏览器滚动，第二个div应该包含小数据，并保持右侧固定 所以当用户滚动页面时，两个div都应该保持在parllel中 这里有一个类似的例子（例子）[ 在上面的页面中，当您在描述之后访问时，它显示了两个parllel div.。一个保持固定。另一个使用浏览器滚动条移动 编辑我的努力 <div className="book"> <table>
<div className="book">
<table>
<tr>
<td>
<div class className="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
</div>
</td>
<td>
<div className="page2" style={style} onScroll={this.handleScroll.bind(this)}>
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
</div>
</td>
</tr>
</table>
</div>
//css
.book table td {
vertical-align: top;
}
.page1 {
border: solid 1px red;
width: 400px;
}
.page2 {
border: solid 1px red;
width: 400px;
position: static;
}
第1页
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
从主滚动条滚动
.book {
position: relative;
}
.page1 {
background-color: azure;
width: 50%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top:0;
}
.page2 {
background-color: tomato;
width: 50%;
margin: 0;
padding: 0;
position: fixed;
right:0;
top: 0;
}