html - Javascript scrollHeight changes when observing the scrollHeight differently - Stack Overflow

admin管理员组

文章数量:1431788

When I observe the scroll height in my project in two different ways, two different numbers come up.

I'm currently working on a project, and i am trying to apply a background to a menu element when it is opened. Because the element can be dynamic in size, i am trying to grab the elements scroll height and trying to apply it to the background's height.

The issue is that the scroll height comes up short. When inspecting the element itself with a console log and checking its properties, the scroll height is for example 450. When I dump out the scroll height by itself, it changes to 270.

Showing the JavaScript Results of the first console log Results of the second console log

First Screenshot ("Showing the JavaScript")

console.log(subnav)
console.log("Scrollheight is: " + subnav.scrollHeight)

Second Screenshot ("Results of the first console log")

parentElement: <li class
parentNode: <li class="e
part DOMTokenList []
popover: null
prefix: null
previousElementSibling:
previousSibling: #text "
role: null
scrollHeight: 450
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 268
shadowRoot: null
slot: ""
spellcheck: false
style: CSS"Properties(0)
tabIndex: -1

Third Screenshot ("Result of the second console log")

[vite] connecting...
[vite] connected.
<div class="header__subnav-container...inter-events-none w-max">
Scrollheight is: 270

本文标签： htmlJavascript scrollHeight changes when observing the scrollHeight differentlyStack Overflow