Почему ScrollTop не принимает установленное значение ⇐ CSS

[Anonymous]

Я столкнулся с проблемой при настройке ScrollTop: при установке значения он возвращается к старому значению. Результатом является кратковременная вспышка, когда полоса прокрутки перемещается, а затем возвращается в исходное положение. Я наблюдаю эту проблему в разных браузерах и операционных системах.
У этой проблемы есть некоторые дополнительные особенности, которые делают ее еще более странной.

• Это происходит только тогда, когда вы манипулируете полосой прокрутки. Если вы используете колесо мыши, проблем нет.
• В примере, который я привожу, если вы отключите для внешнего элемента div, либо атрибут CSS переполнения, либо оба атрибута радиуса границы, возникнут проблемы. уходит. Чтобы усугубить мои страдания, пример, который я привожу, представляет собой СИЛЬНО урезанную версию исходной программы. В этой программе внешний элемент div находится вне моего контроля и (держись за место) существует ВНЕ iframe, в котором работает мой код. ПРАВИЛЬНО! Некоторые сведения о том, как CSS влияет на работу внутри iframe. Я проверил и не вижу изменения размера iframe или какого-либо изменения собственного CSS или атрибутов.

У меня есть скрипт, который демонстрирует проблему Однако, чтобы увидеть, как удаление CSS также устраняет проблему, лучше всего запустить его самостоятельно из вашей IDE. Я думаю, что у jsFiddle есть собственный CSS где-то за пределами iframe, в котором он работает, и это вызывает проблему.
https://jsfiddle.net/CodeMedic42/oxut78b2/3/
Я предоставил команду отладчика, чтобы остановить отладчик там, где возникает проблема. Чтобы увидеть проблему, прокрутите вниз, используя мышь и перетащив полосу прокрутки, до 1985:11, и как только вы пройдете мимо нее, новые элементы будут добавлены в верхнюю часть списка, что переместит полосу прокрутки вниз. Затем я возвращаю полосу прокрутки обратно в то место, откуда она была перемещена.
Если вы еще не догадались, я создаю компонент бесконечного списка. Я столкнулся с этой проблемой, запуская ее в Storybook.
А также, если вы спрашиваете, почему я использую «overflow-anchor: none;» Я сердито направлю вас в Apple, чтобы спросить, почему Safari на Mac и iOS — единственный современный браузер, который его не поддерживает. Если бы они это сделали, меня бы сейчас здесь не было.
Мне нужно предоставить код для ссылки jsFiddle, иначе StackOverflow не примет его. Это просто копия скрипки.
function chooseColor(index) {
const v = index % 10;

if (v === 0) {
return 'purple';
}

if (v === 1) {
return 'orange';
}

if (v === 2) {
return 'green';
}

if (v === 3) {
return 'yellow';
}

if (v === 4) {
return 'magenta';
}

if (v === 5) {
return 'red';
}

if (v === 6) {
return 'black';
}

if (v === 7) {
return 'brown';
}

if (v === 8) {
return 'pink';
}

return 'cyan';
}

function List() {
const listRef = React.useRef();
const itemsRef = React.useRef();
const itemsRemoved = React.useRef(false);
const shiftInfoRef = React.useRef(null);

const [itemsMeta, setItemsMeta] = React.useState({ from: { year: 1974, month: 3 }, to: { year: 1991, month: 8 }});

const items = React.useMemo(() => {
const builder = [];
let startingMonth = itemsMeta.from.month;
let endingMonth = 12;

for (let yearCounter = itemsMeta.from.year; yearCounter {
const targetChild = itemsRef.current.childNodes[70];

targetChild.scrollIntoView({
block: 'start',
inline: 'start',
});
}, []);

React.useLayoutEffect(() => {
if (shiftInfoRef.current == null || itemsRef.current == null) {
return;
}

const { previousPosition, item } = shiftInfoRef.current;

const itemRect = item.getBoundingClientRect();

const scrollTop = listRef.current.scrollTop - (previousPosition - itemRect.top);

shiftInfoRef.current = null;

debugger;
// This fails when scrolling using the scrollbar, but works when using the mouse wheel. #rage
listRef.current.scrollTop = scrollTop;
});

return (
position: 'absolute',
width: '100%',
height: '100%',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
overflow: 'hidden',
}}>


Top Header

{items}



);
}

:root {
scroll-behavior: smooth;
}

* {
box-sizing: border-box;
}

html,
body,
#app {
padding: 0;
margin: 0;
background-color: white;
height: 100%;
}

.list {
height: 100%;
overflow: auto;
box-sizing: border-box;
overflow-anchor: none;
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... -being-set