Teste a diferença entre essas três propriedades através de uma demonstração.
ilustrar:
Scrollwidth: A largura do conteúdo real do objeto, a largura da linha sem arestas, se tornará maior à medida que o conteúdo do objeto excede a área de visualização.
Largura do cliente: a largura da área de visualização do conteúdo do objeto, sem envolver as linhas equiláteis da barra de rolagem, mudará à medida que o tamanho da exibição do objeto muda.
Lwidth Offset: A largura real do objeto como um todo, a barra de rolagem é igualmente com bordas, o que mudará à medida que o objeto exibe o tamanho.
A demonstração coloca um elemento textarea na página e o exibe com a largura e a altura padrão.
Situação 1:
Se não houver conteúdo no elemento ou o conteúdo não exceder a área de visualização, a rolagem não aparece ou não estará disponível.
scrollWidth = ClientWidth, ambos são a largura da área de visualização de conteúdo.
O offsetWidth é a largura real do elemento.
Situação 2:
O conteúdo do elemento excede a área de visualização, a barra de rolagem aparece e está disponível.
Scrollwidth> ClientWidth.
A largura de roll é a largura do conteúdo real.
A largura do cliente é a largura da área de visualização de conteúdo.
O offsetWidth é a largura real do elemento.
FIM
O exposto acima são todas as diferenças entre a largura de rolagem, a largura do cliente e a largura de offset. Espero que seja útil para todos.