我想建立一个无限的水平滚动，在两个方向滚动-左和右.当用户向左滚动时，新内容会被添加到可滚动元素中(例如，滚动日程表历史记录).当它们向右滚动时，内容被追加.
我了解到浏览器在上下滚动时会锚定内容，这真是太棒了，这正是我所期望的.这样做的效果是，将内容预先添加到滚动元素会将用户锚定到当前的逻辑位置，而内容不会"跳转".
但向左或向右滚动时，锚定似乎不起作用.这种行为就好像我设定了overflow-anchor: none.我能做些什么来让它在向上滚动时也能正常工作？
let topCounter = 0;
document.querySelector('.scrollable-top').scrollTo({ top: 100 });
document.querySelector('.scrollable-top').onscroll = (event) => {
if (event.target.scrollTop < 100) {
let box = document.createElement('div');
box.className = 'content-box';
box.textContent = `${topCounter--}`;
document.querySelector('.scrollable-top').prepend(box);
}
};
let leftCounter = 0;
document.querySelector('.scrollable-left').scrollTo({ left: 100 });
document.querySelector('.scrollable-left').onscroll = (event) => {
if (event.target.scrollLeft < 100) {
let box = document.createElement('div');
box.className = 'content-box';
box.textContent = `${leftCounter--}`;
document.querySelector('.scrollable-left').prepend(box);
}
};.scrollable-top {
width: 200px;
height: 250px;
overflow-y: auto;
border: solid 1px black;
}
.scrollable-left {
display: flex;
width: 250px;
overflow-x: auto;
border: solid 1px black;
}
.content-box {
flex: 1 0 auto;
height: 150px;
width: 150px;
border: solid 1px red;
display: flex;
justify-content: center;
align-items: center;
}<div class="scrollable-top">
<div class="content-box">1</div>
<div class="content-box">2</div>
<div class="content-box">3</div>
</div>
<div class="scrollable-left">
<div class="content-box">1</div>
<div class="content-box">2</div>
<div class="content-box">3</div>
</div>