如何在滚动时根据屏幕上的内容 (Expand/Collapse) 制作可自动调整大小的 div？
How to make an auto-resizable div depending on the content on the screen (Expand/Collapse) while scrolling?
如何在屏幕上拆分两个 DIV，并且在滚动时 - 左侧 DIV 是静态的，右侧 DIV 是可滚动的。但是如果检测到溢出，右侧 DIV 会在滚动时展开？
我要实现的是：
- 有两个垂直 div 分割屏幕。
- 左边div是固定的，不可滚动，但是如果右边div的元素窄了会展开，中间填space。当右边div的元素变宽时，左边div会收缩显示元素
JsFiddle：JsFiddle
.container {
margin-top: 32px;
min-height: 300px;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
.container .left {
width: 100%;
height: 100%;
background-color: blue;
padding: 10px;
}
.container .right {
width: 50%;
height: 100%;
background-color: red;
padding: 15vh 10px;
box-sizing: border-box;
overflow: scroll;
}
.container .right table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices
dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris
sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis
eu volutpat odio facilisis mauris sit amet. Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris
augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque
id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique
magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices. Nibh nisl condimentum id venenatis a condimentum
vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada
nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget
nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci. A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum
non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa.
Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus
ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi
enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat. Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum
lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor
massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan.
Id eu nisl nunc mi ipsum.</p>
</div>
<div class="image">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
@Naz 我回答了你之前的 post。没用吗？
答案：
应该这样做
<!DOCTYPE html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
margin-top: 32px;
display: flex;
flex-flow: row nowrap;
width: 100%;
height: calc(100vh - 32px); /* minus margin top offset */
}
.container .left {
padding: 10px;
width: 50%;
height: 100%;
background-color: blue;
}
.container .right {
padding: 10px;
width: 50%;
height: 100%;
max-height: 100%;
background-color: red;
overflow-y: scroll;
}
.container .right table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis eu volutpat odio facilisis mauris sit amet.
Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices.
Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci.
A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat.
Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Id eu nisl nunc mi ipsum.
</p>
</div>
<div class="image">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
</div>
</div>
</body>
</html>
如果你在右手的每个 child 上放置一个十字路口观察器 div 当它进入或离开视野时你会被告知。
仔细观察问题中的 GIF，内容完全绘制在右侧，宽的部分占整个宽度，窄的部分占一半。然后，如果视野中有一个较宽的部分，则蓝色的左侧会缩回以显示它。如果看不到宽的部分，那么蓝色 div 会扩展到覆盖右手的一半 div。
从给定的 HTML 中，右侧的哪些部分要显示得较宽并不明显（例如，在 GIF 中，顶部的 table 是较宽的 - 这不仅仅是一种调整图像）。因此，一个额外的 class 'wide' 已被添加到您想要变宽的那些 div 中。
此代码段从问题中提取 HTML，但将此 class 添加到顶部的 table 和底部的图像 div，以便更接近地模拟 GIF。
我们统计了 children 宽阔的视野。有的话就收缩左手div.
function callback(entries) {
for (let i=0; i < entries.length; i++) {
let entry = entries[i];
let child = entry.target;
if ( child.offsetWidth > originalWidth/2 ) {
if (entry.isIntersecting) { count++; }
else {
if (child.getAttribute('data-firsttime') == 0 ) { count--; }
}
}
child.setAttribute('data-firsttime', 0);
}
if (count > 0) { left.classList.remove('expand'); }
else { count = 0; left.classList.add('expand'); }
}
const observer = new IntersectionObserver(callback);
const left = document.querySelector('.left');
const right = document.querySelector('.right');
let originalWidth = right.offsetWidth;
const children = right.children;
let count = 0; // keep a count of how many children in view are wider
function setup() {
for ( let i = 0; i < children.length; i++ ) {
children[i].setAttribute('data-firsttime', 1); //set a marker to say if not yet been observed
observer.observe(children[i]);
}
}
function resize() {
originalWidth = right.offsetWidth;
}
window.onload = setup;
window.onresize = resize;
* {
margin: 0;
padding: 0;
}
.container {
margin-top: 32px;
min-height: 300px;
height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.container .left {
width: calc(50% - 20px); /* allow space for padding */
height: 100%;
background-color: blue;
padding: 10px;
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition: width 1s;
}
.container .left.expand {
width: calc(75% - 40px); /* allow space for padding of container and right */
}
.container .right {
width: 50%;
height: 100%;
background-color: red;
padding: 15vh 10px;
box-sizing: border-box;
overflow-y: auto;/* ADDED */
position: relative;
left: 50%;
}
.container .right table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container .right > * {
position: relative;
left: 50%;
width: 50%;
}
.container .right div.wide {
left: 0;
width: 100%;
}
.container .right div.wide.image img{
width: 100%;
height: auto;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX wide">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis eu volutpat odio facilisis mauris sit amet.
Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices.
Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci.
A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat.
Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Id eu nisl nunc mi ipsum.</p>
</div>
<div class="image wide">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
更新：Javascript 的解释：
创建一个 IntersectionObserver，只要它被要求观察的元素进入或离开视口，它就会调用回调函数。
遍历正确元素的所有直接 children 并要求观察者观察它们中的每一个 - 因此无论何时它们进入或离开视口，回调函数都会被输入。
当输入回调函数时，它会给出一个条目列表 - 每个条目都会告诉您观察到哪个元素进入或离开视口 (element.target) 以及是否它被观察到进入或离开视口 (element.isIntersecting)。
如果看到宽元素进入视口，则我们将视口中的宽元素计数加一。
如果看到它正在离开视口（element.isIntersecting 是假的）那么我们会减去这个计数，除非是第一次 - 这是因为当我们第一次设置observer 观察一个元素，它会立即告诉我们它是在视口内部还是外部，所以我们一开始不想计算任何外部元素（这是将图像放在顶部时遇到的问题，还有一个在底部，看不见，所以计数变为 0）。
如果视口中有些东西很宽（或某些东西），那么我们希望蓝色左侧元素缩小，以便我们看到整个右侧元素。
如果视口中没有任何东西变宽，那么我们希望蓝色左侧元素展开，从而使右侧元素变细。
IntersectionObserver 是一种处理某些滚动情况的更简洁的方法，因为您不必在用户每次滚动时都继续查看，只有当您感兴趣的元素出入视口时才需要查看。有关详细信息，请参阅 MDN。
如何在屏幕上拆分两个 DIV，并且在滚动时 - 左侧 DIV 是静态的，右侧 DIV 是可滚动的。但是如果检测到溢出，右侧 DIV 会在滚动时展开？
我要实现的是：
- 有两个垂直 div 分割屏幕。
- 左边div是固定的，不可滚动，但是如果右边div的元素窄了会展开，中间填space。当右边div的元素变宽时，左边div会收缩显示元素
JsFiddle：JsFiddle
.container {
margin-top: 32px;
min-height: 300px;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
.container .left {
width: 100%;
height: 100%;
background-color: blue;
padding: 10px;
}
.container .right {
width: 50%;
height: 100%;
background-color: red;
padding: 15vh 10px;
box-sizing: border-box;
overflow: scroll;
}
.container .right table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices
dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris
sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis
eu volutpat odio facilisis mauris sit amet. Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris
augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque
id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique
magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices. Nibh nisl condimentum id venenatis a condimentum
vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada
nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget
nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci. A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum
non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa.
Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus
ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi
enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat. Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum
lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor
massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan.
Id eu nisl nunc mi ipsum.</p>
</div>
<div class="image">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
@Naz 我回答了你之前的 post。没用吗？
答案：
应该这样做
<!DOCTYPE html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
margin-top: 32px;
display: flex;
flex-flow: row nowrap;
width: 100%;
height: calc(100vh - 32px); /* minus margin top offset */
}
.container .left {
padding: 10px;
width: 50%;
height: 100%;
background-color: blue;
}
.container .right {
padding: 10px;
width: 50%;
height: 100%;
max-height: 100%;
background-color: red;
overflow-y: scroll;
}
.container .right table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis eu volutpat odio facilisis mauris sit amet.
Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices.
Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci.
A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat.
Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Id eu nisl nunc mi ipsum.
</p>
</div>
<div class="image">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
</div>
</div>
</body>
</html>
如果你在右手的每个 child 上放置一个十字路口观察器 div 当它进入或离开视野时你会被告知。
仔细观察问题中的 GIF，内容完全绘制在右侧，宽的部分占整个宽度，窄的部分占一半。然后，如果视野中有一个较宽的部分，则蓝色的左侧会缩回以显示它。如果看不到宽的部分，那么蓝色 div 会扩展到覆盖右手的一半 div。
从给定的 HTML 中，右侧的哪些部分要显示得较宽并不明显（例如，在 GIF 中，顶部的 table 是较宽的 - 这不仅仅是一种调整图像）。因此，一个额外的 class 'wide' 已被添加到您想要变宽的那些 div 中。
此代码段从问题中提取 HTML，但将此 class 添加到顶部的 table 和底部的图像 div，以便更接近地模拟 GIF。
我们统计了 children 宽阔的视野。有的话就收缩左手div.
function callback(entries) {
for (let i=0; i < entries.length; i++) {
let entry = entries[i];
let child = entry.target;
if ( child.offsetWidth > originalWidth/2 ) {
if (entry.isIntersecting) { count++; }
else {
if (child.getAttribute('data-firsttime') == 0 ) { count--; }
}
}
child.setAttribute('data-firsttime', 0);
}
if (count > 0) { left.classList.remove('expand'); }
else { count = 0; left.classList.add('expand'); }
}
const observer = new IntersectionObserver(callback);
const left = document.querySelector('.left');
const right = document.querySelector('.right');
let originalWidth = right.offsetWidth;
const children = right.children;
let count = 0; // keep a count of how many children in view are wider
function setup() {
for ( let i = 0; i < children.length; i++ ) {
children[i].setAttribute('data-firsttime', 1); //set a marker to say if not yet been observed
observer.observe(children[i]);
}
}
function resize() {
originalWidth = right.offsetWidth;
}
window.onload = setup;
window.onresize = resize;
* {
margin: 0;
padding: 0;
}
.container {
margin-top: 32px;
min-height: 300px;
height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.container .left {
width: calc(50% - 20px); /* allow space for padding */
height: 100%;
background-color: blue;
padding: 10px;
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition: width 1s;
}
.container .left.expand {
width: calc(75% - 40px); /* allow space for padding of container and right */
}
.container .right {
width: 50%;
height: 100%;
background-color: red;
padding: 15vh 10px;
box-sizing: border-box;
overflow-y: auto;/* ADDED */
position: relative;
left: 50%;
}
.container .right table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container .right > * {
position: relative;
left: 50%;
width: 50%;
}
.container .right div.wide {
left: 0;
width: 100%;
}
.container .right div.wide.image img{
width: 100%;
height: auto;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="tableX wide">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div class="par-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci nulla pellentesque dignissim enim sit. Risus ultricies tristique nulla aliquet enim tortor at. Viverra justo nec ultrices dui sapien. Pharetra diam sit amet nisl suscipit adipiscing bibendum. In cursus turpis massa tincidunt dui ut. In vitae turpis massa sed. Libero id faucibus nisl tincidunt. Blandit volutpat maecenas volutpat blandit aliquam. Odio facilisis mauris sit amet massa. Libero enim sed faucibus turpis. Praesent tristique magna sit amet. Sit amet porttitor eget dolor morbi non arcu. Turpis egestas pretium aenean pharetra magna ac. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Sagittis eu volutpat odio facilisis mauris sit amet.
Elementum nibh tellus molestie nunc non. Est ante in nibh mauris cursus. Nisl rhoncus mattis rhoncus urna neque viverra. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Pretium lectus quam id leo in vitae turpis massa sed. Eu consequat ac felis donec et odio pellentesque. A erat nam at lectus urna duis. Quam quisque id diam vel quam elementum pulvinar etiam non. In dictum non consectetur a erat. Vitae auctor eu augue ut. Sed id semper risus in hendrerit gravida rutrum. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Aliquet nibh praesent tristique magna sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Odio tempor orci dapibus ultrices.
Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Nulla aliquet enim tortor at. Netus et malesuada fames ac turpis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. At augue eget arcu dictum varius duis at consectetur lorem. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Libero justo laoreet sit amet. Neque gravida in fermentum et sollicitudin ac orci. Hac habitasse platea dictumst vestibulum rhoncus. Morbi leo urna molestie at elementum eu facilisis sed. Eget nunc lobortis mattis aliquam faucibus purus. Risus quis varius quam quisque id diam vel. Gravida rutrum quisque non tellus orci.
A scelerisque purus semper eget duis. Ut etiam sit amet nisl. Sem viverra aliquet eget sit amet tellus. In dictum non consectetur a erat. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Volutpat lacus laoreet non curabitur gravida arcu ac. Nunc sed id semper risus in. Tempor orci dapibus ultrices in iaculis nunc sed. Eros in cursus turpis massa. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus molestie nunc non blandit massa enim nec. Tristique magna sit amet purus gravida quis blandit. Leo in vitae turpis massa sed elementum. Ac odio tempor orci dapibus ultrices. Turpis in eu mi bibendum neque egestas congue quisque. Vestibulum lorem sed risus ultricies tristique nulla. Bibendum est ultricies integer quis auctor elit sed vulputate. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Justo laoreet sit amet cursus. Quisque sagittis purus sit amet volutpat.
Mi eget mauris pharetra et ultrices neque ornare. Condimentum mattis pellentesque id nibh tortor id aliquet. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Faucibus vitae aliquet nec ullamcorper. Etiam erat velit scelerisque in dictum non consectetur a. Leo vel fringilla est ullamcorper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Pretium viverra suspendisse potenti nullam ac tortor vitae. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Feugiat in ante metus dictum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Id eu nisl nunc mi ipsum.</p>
</div>
<div class="image wide">
<img src="https://i.imgur.com/hMrkGV8.png" alt="">
</div>
更新：Javascript 的解释：
创建一个 IntersectionObserver，只要它被要求观察的元素进入或离开视口，它就会调用回调函数。
遍历正确元素的所有直接 children 并要求观察者观察它们中的每一个 - 因此无论何时它们进入或离开视口，回调函数都会被输入。
当输入回调函数时，它会给出一个条目列表 - 每个条目都会告诉您观察到哪个元素进入或离开视口 (element.target) 以及是否它被观察到进入或离开视口 (element.isIntersecting)。
如果看到宽元素进入视口，则我们将视口中的宽元素计数加一。
如果看到它正在离开视口（element.isIntersecting 是假的）那么我们会减去这个计数，除非是第一次 - 这是因为当我们第一次设置observer 观察一个元素，它会立即告诉我们它是在视口内部还是外部，所以我们一开始不想计算任何外部元素（这是将图像放在顶部时遇到的问题，还有一个在底部，看不见，所以计数变为 0）。
如果视口中有些东西很宽（或某些东西），那么我们希望蓝色左侧元素缩小，以便我们看到整个右侧元素。
如果视口中没有任何东西变宽，那么我们希望蓝色左侧元素展开，从而使右侧元素变细。
IntersectionObserver 是一种处理某些滚动情况的更简洁的方法，因为您不必在用户每次滚动时都继续查看，只有当您感兴趣的元素出入视口时才需要查看。有关详细信息，请参阅 MDN。