Как проверить, находится ли элемент html на верхнем уровне и виден ли он ⇐ CSS

[Гость]

Например, у меня есть раскрывающийся список. Последний элемент в списке — мой целевой элемент. Поэтому я не могу найти способ узнать, вижу ли я элемент, потому что он может быть перекрыт другим элементом. Это означает, что мне нужно каким-то образом знать, что я могу видеть на странице хотя бы часть этого элемента. Можно ли сделать с помощью js и css. getComputedStyle().visibility или .display не будут отличаться когда раскрывающийся список закрыт, мне нужно получить ложь, когда я его открываю, я хочу получить истину. Даже если оно находится за пределами экрана, если я прокручиваю его, я вижу это, так что это должно быть правдой. У меня может быть ссылка на этот целевой элемент, поэтому она должна работать с каждым элементом.

.dropbtn { цвет фона: #4CAF50; белый цвет; отступ: 16 пикселей; размер шрифта: 16 пикселей; граница: нет; курсор: указатель; } .падать { положение: относительное; отображение: встроенный блок; } .dropdown-content { дисплей: нет; позиция: абсолютная; цвет фона: #f9f9f9; минимальная ширина: 160 пикселей; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-индекс: 1; } .dropdown-content а { черный цвет; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { дисплей: блок; } .dropdown:hover .dropbtn { цвет фона: #3e8e41; } Раскрывающийся список Ссылка 1 Ссылка 2 Ссылка 3