Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2021, 18:53
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,313

ScrollIntoView. Неужто не придумали решения победить странное поведение
Вот модельный код
<!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 возвращать блок на место, но зрительно эти прыжки туда сюда еще отвратнее.
Или только остается самому рассчитывать на сколько прокрутить и плавно прокручивать?

Последний раз редактировалось voraa, 13.10.2021 в 18:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Странное поведение отладчика Andrew K Библиотеки/Тулкиты/Фреймворки 8 29.11.2019 11:30
Странное поведение jQuery borodatych Javascript под браузер 5 27.02.2014 09:47
Странное поведение переменной mycoding Серверные языки и технологии 4 14.01.2011 18:18
Странное поведение replace cooli0 Общие вопросы Javascript 4 25.01.2010 16:16