I wrote this code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
let html = document.documentElement
console.log(window.innerWidth) // 420
console.log(html.clientWidth) // 420
console.log(html.offsetWidth) // 420
html.style.overflowY = 'scroll' // add scroll-bar
console.log('Window: ' + window.innerWidth) // Window: 420
console.log('clientWidth: ' + html.clientWidth) // clientWidth: 403
console.log('offsetWidth: ' + html.offsetWidth) // offsetWidth: 403 (*)
</script>
</body>
</html>
When I added scroll-bar, I got 403 as clientWidth, and this seems like true: 403px for inner content + 17px for scroll-bar. And then I got 403 as offsetWidth, but offsetWidth must include scroll-bar width. Therefore I should get 420, not 403.
Why do I get 403 as result in (*)?
Aucun commentaire:
Enregistrer un commentaire