scrollIntoView в элемент аккордеона

116
31 января 2020, 11:20

Я делаю словарь русского языка в виде аккордеона, где каждое слово в своей ячейке.

Сейчас мне надо, чтобы ящик содержания каждой ячейки автоматически расположился в центре экрана при щелчке на ячейку выбранного слова.

Если щёлкну ячейку "число", например, так произойдёт:

Надо прокручивать вручную до желаемого содержания:

Что делать? Я читал о команде scrollIntoView, но не знаю, как её приложить к моему аккордеону. Вот отрывки моего кода:

CSS:

 .accordionWrapper { (...) }
.accordionItem { (...) }
.accordionItemHeading {
cursor: pointer; (...) 
}
.close .accordionItemContent {
                height:0px;
                -webkit-transform: scaleY(0);
                float:left;
                display:block;
            }
.open .accordionItemContent {
                (...)
                display:block;
                -webkit-transform: scaleY(1);
                -webkit-transform-origin: top;
                box-sizing: border-box;
            }
 .open .accordionItemHeading {
                margin:0px;
                -webkit-border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -webkit-border-bottom-right-radius: 0px;
                -webkit-border-bottom-left-radius: 0px;
                (...)
            }
(...)

HTML/PHP:

<div class="accordionWrapper">
<div class='accordionItem close'>
<h2 class='accordionItemHeading'> <!--PHP здесь--> </h2>
<div class='accordionItemContent'>
<!--PHP здесь -->
</div>
</div>
</div>

Javascript:

<script>   
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
var accCon = document.getElementsByClassName('accordionItemContent');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
      }
function toggleItem() {
     var itemClass = this.parentNode.className;
     for (i = 0; i < accItem.length; i++) {
               accItem[i].className = 'accordionItem close';
                    }
      if (itemClass == 'accordionItem close') {
               this.parentNode.className = 'accordionItem open';
               accCon.scrollIntoView();
                    }
                }

</script> 

Весь код работает, кроме строки accCon.scrollIntoView();. Заранее спасибо за помощь!

READ ALSO
Уменьшить анимацию в два раза

Уменьшить анимацию в два раза

Как сделать чтобы сова была в 2 раза меньше?Нужно чтобы только сова стала в 2 раза меньше а все остальные элементы оставались без изменения

119
React native как запустить чужой проект?

React native как запустить чужой проект?

скачал сборку с гитхаба и хотел бы проверить ее у себя, но проблема не устанавливается - собака

130
Не монтируются роуты в React приложении

Не монтируются роуты в React приложении

По какой-то причине роут не добавляется в приложение

128