search

981377660LMT / ts

ts学习
6 stars 1 forks source link

scrollHeight, clientHeight, offsetHeight的区别 #435

Open 981377660LMT opened 7 months ago

981377660LMT commented 7 months ago

https://segmentfault.com/a/1190000016554851?u_atoken=331dff5a-1d5f-44ba-9b9e-623151c4443b&u_asession=01x_1xuiHKqtNo7RTYZb7XONUX_BIiIysrPAyCk-JSYyilraC5sdzwpU5L27D_I-u17jlRJKwrl0uQMA4iwbjUkdsq8AL43dpOnCClYrgFm6o&u_asig=05fuxXBjFy9WSzPTqC0P4yv8zPE_4_GeEuV_-1TmtLOkUKE5KKK-9i7p8V39P8pWh5ylJ0hYI78iJIf52tySKO1XozYYT-nyqTBk3aDS-wYuD5fjI_W_PcZdtmC8Id-1v5hJcXyb8F8mDvee9FoT7WeolQZDzpY8oTHZdupbMzS67b2M8725rgLyNfIgnataU_ksmHjM0JOodanL5-M1Qs1Uw-xcJcEwjM7nc3ml0uEi4WWimAi33bIUO8lkvp4nx1iwgONTk8H5kTRrOrVmo506dk7US48nOSfSBVhvMDchXY94r_LXIIil3Y3aVPRGAe&u_aref=tdLbJBqoSmT0BqO7Ak%2FJUHrWqO8%3D

981377660LMT commented 7 months ago

scrollHeight: 就是container内部的总高度 这里内部元素就是large_block，large_block所撑开的高度(2000 + 40（上下padding） + 40（上下margin）) = 2080px，然后加上自身container上下各10px的padding,因此一共是2100px

clientHeight: 就是container内部可见高度 + 自身padding。 内部可见高度为600 - 17(滚动条高度) padding为上下各10，因此一共是600 - 17 + 20 = 603

offsetHeight: 也是container自己本身的可见高度 + 自身padding + 自身border + 滚动条 与clientHeight不同的就是要加上自身border以及滚动条的高度，因此是603 + 20 + 17 = 640

981377660LMT commented 7 months ago

一般的，clientHeight < offsetHeight < scrollHeight