Вот модельный код
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#main {
position:relative;
width: 300px;
height: 300px;
border: 1px solid black;
overflow-y: auto;
}
#ucont {
position:relative
}
#open {
position:relative;
height: 120px;
margin:10px 20px;
border: 1px solid red;
overflow-y: auto;
}
#bscr {
position: sticky;
top: 0;
float: right;
z-index: 10;
}
#elem {
color: red;
}
</style>
<script>
</script>
</head>
<body>
<div id="main">
<div id="ucont">
<ul>
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<div id='open'>
<button id= bscr>Scroll</button>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text <span id='elem'> elem elem </span>text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
text text text text <br>
</div>
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
<li> item item item
</ul>
</div>
</div>
<script>
const bt = document.getElementById('bscr')
const main = document.getElementById('main')
const el = document.getElementById('elem')
bt.addEventListener('click', () => {
const st = main.scrollTop;
el.scrollIntoView({block: "center" , behavior: "smooth"})
//main.scrollTop = st // работает без behavior: "smooth"
})
</script>
</body>
</html>
Можно ли что то сделать, что бы #elem прокручивался до центра только своего родительского блока, его родительский блок не прокручивался внутри своего родителя?
Без behavior: "smooth" помогает тупое шаманство с scrollTop.
А как с плавной прокруткой быть?
Моно, конечно и по setTimeout возвращать блок на место, но зрительно эти прыжки туда сюда еще отвратнее.
Или только остается самому рассчитывать на сколько прокрутить и плавно прокручивать?
