С футляром-оберткой
Смотри изображение выше, у меня есть контейнер с оберткой, обертывающий 6 предметов, зеленого цвета и высотой 500 пикселей. Сначала я позволил контейнеру прокрутиться до 1000, это третий элемент прокрутки к вершине области просмотра.
Затем я нажимаю кнопку small, каждый щелчок уменьшает высоту элемента. Он начинается с первого, затем со второго.
В результате при первом нажатии small третий элемент 3 все еще остается наверху. Я регистрирую scrollTop из container , это 600;
Но при втором щелчке small третий элемент 3 переместится вверх, и 4-й элемент отобразится в окне просмотра. scrollTop из container - это подоконник 600;
В этом случае контейнер можно прокручивать, оборачивая предметы. Код прилагается.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container {
overflow: scroll;
height: 200px;
}
.item {
height: 500px;
background: lime;
}
.small {
height: 100px;
background: lightblue;
}
.wrapper {
border: 1px solid red;
height: fit-content;
}
</style>
<body>
<div class="container">
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
<button id="insert">insert</button>
<button id="add">append</button>
<button id="remove">remove</button>
<button id="shift">shift</button>
<button id="shrike">shrike</button>
<button id="small">small</button>
<script>
let count = 100;
document.getElementsByClassName('container')[0].scrollTop = 1000
document.getElementById('add').addEventListener('click',function() {
const node = document.createElement('div')
node.className = 'item'
node.innerText = count++;
document.getElementsByClassName('wrapper')[0].appendChild(node)
showScroll();
})
document.getElementById('insert').addEventListener('click',function() {
const node = document.createElement('div')
node.className = 'item'
node.innerText = count++;
const firstEle = document.getElementsByClassName('item')[0];
firstEle.parentNode.insertBefore(node, firstEle)
showScroll();
})
document.getElementById('remove').addEventListener('click',function() {
const node = document.createElement('div')
node.className = 'item'
node.innerText = count++;
const items = document.getElementsByClassName('item');
document.getElementsByClassName('wrapper')[0].removeChild(items[items.length-1]);
showScroll();
})
document.getElementById('shift').addEventListener('click',function() {
const node = document.createElement('div')
node.className = 'item'
node.innerText = count++;
document.getElementsByClassName('wrapper')[0].removeChild(document.getElementsByClassName('item')[0]);
showScroll();
})
document.getElementById('shrike').addEventListener('click',function() {
const items = document.getElementsByClassName('item');
Array.from(items).forEach(item => {
item.classList.add('small')
})
showScroll();
})
document.getElementById('small').addEventListener('click',function() {
const items = document.getElementsByClassName('item');
items[0].classList = 'small'
showScroll();
})
function showScroll() {
console.log(document.getElementsByClassName('container')[0].scrollTop)
}
</script>
</body>
</html>
Без чехла
Затем я попытался удалить упаковку:
<div class="container">
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
изменить на
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
И на этот раз результат таков: первый щелчок small, третий элемент 3 удерживается сверху. Я записываю scrollTop из container, это 600;
Но второй щелчок small третий пункт 3 все еще держится наверху. scrollTop из container - это 200;
Меня беспокоит вопрос: в чем разница? Любые подсказки будут оценены. Спасибо.