scrollWidth/scrollHeight 给出无效的尺寸 [英] scrollWidth/scrollHeight give invalid dimensions

问题描述

如https://developer.mozilla.org/en/Determining_the_dimensions_of_elements所述:

如果您需要知道内容的实际大小，无论如何其中大部分当前可见，您需要使用 scrollWidth 和scrollHeight 属性.

If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the scrollWidth and scrollHeight properties.

因此，我使用 scrollWidth 和 scrollHeight 属性将元素的大小调整为其实际大小(jsfiddle).

So, I am using the scrollWidth and scrollHeight properties to resize the element to its actual size (jsfiddle).

HTML:

<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</textarea>

JavaScript:

JavaScript:

(function ($) {
    $(document).ready(function () {
        $('textarea').css({ 
            width: $('textarea')[0].scrollWidth, 
            height: $('textarea')[0].scrollHeight 
        });
    });
})(jQuery);

我会假设，如果我将尺寸设置为内容的实际大小，元素将没有滚动条，因为它的尺寸足够大，内容不会溢出.对?所以它应该是你在这张图片中看到的样子:i.stack.imgur.com/lKxoz.png

I would assume that if I set the dimensions to the actual size of the content the element would have no scrollbars as its dimensions would be large enough for the content to not overflow. Right? So it should be the way you see in this image: i.stack.imgur.com/lKxoz.png

但它不能正常工作，如下图所示:

But it doesn't work properly as you can see from the following images:

IE:i.stack.imgur.com/JXt0e.png

IE: i.stack.imgur.com/JXt0e.png

Chrome:i.stack.imgur.com/emGyG.png

Chrome: i.stack.imgur.com/emGyG.png

Opera:i.stack.imgur.com/7MAX5.png

Opera: i.stack.imgur.com/7MAX5.png

我的问题是scrollWidth 和 scrollHeight 属性有什么问题?它们给我的尺寸无效！

My question is what is wrong with the scrollWidth and scrollHeight properties? They give me invalid dimensions!

推荐答案

问题是您没有包括滚动条的大小.尝试将溢出"设置为隐藏"或添加滚动条的大小，它可以工作.有多种方法可以计算该大小，Google 会帮助您.出于测试目的，请在 Windows 和 17px 上使用 Chrome.
根据您使用此代码段的上下文，您可能需要在内容更改时重置大小.你还应该给 textarea 一个固定的宽度，否则浏览器会分配任何感觉.

The problem is that you're not including the size of the scrollbars. Try setting "overflow" to "hidden" or adding the size of the scrollbars and it works. There are ways to calculate that size, Google will help you. For testing purposes use Chrome on Windows and 17px.
Depending on the context you're using this snippet you might need to reset the size whenever the content changes. You should also give the textarea a fixed width, else the browser will assign whatever it feels like.

(function ($) {
    $(document).ready(function () {
        $('textarea').css({
            width: $('textarea')[0].scrollWidth+'px',
            height: $('textarea')[0].scrollHeight+'px',
            overflow: 'hidden'
        });
    });
})(jQuery);

这篇关于scrollWidth/scrollHeight 给出无效的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！