У меня есть элемент ввода, который имеет свойство text-align: right.Когда ввод пуст, scrollWidth равен clientWidth, что является правильным случаем, но когда я исправляю один символ в нем, хотя скроллера еще нет, scrollWidth прибывает на один больше, чем clientWidth.Оно должно быть равно.
<html>
<head>
<style>
#content {
height: 80px;
width: 20px;
padding: 0px;
background-color: coral;
text-align: right
}
</style>
</head>
<body>
<p>Click the button to get the entire height (vertically) and width (horizontally) of the div element with id="content".</p>
<button onclick="myFunction()">Try it</button>
<input id="content">Some content..</input>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
var z = elmnt.clientWidth;
document.getElementById ("demo").innerHTML = "ScrollHeight: " + y + "px<br>ScrollWidth: " + x + "px<br>clientWidth: " + z + "px";
}
</script>
</body>
</html>
попробуйте добавить один символ в поле ввода выше, и вы увидите, что scrollWidth прибывает 21, а clientWidth прибывает 20. В идеале они оба должны иметь значение 20, пока не будет скроллера.