Что может повлиять на значение, возвращаемое $ (window) .width()?

Question

У меня есть приложение, которое использует jQuery, чтобы скрыть/показать панель. Вот версия aspx, которая показывает принцип:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ClickMe').click(function() { 
      $('#Panel').toggle(); 
      $('#Width').text($(window).width()); 
     }); 
     $('#Width').text($(window).width()); 
    }); 
</script> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <fieldset id="FS1"> 
     <legend id="ClickMe">Click Me</legend> 
     <div id="Panel" style="display:;width:auto"> 
      <label for="A">A</label> 
      <input id="A" name="A" type="text" value="" /> 
     </div> 
    </fieldset> 
    <span id="Width">0</span> 
</asp:Content> 

Это работает как ожидалось. $ (window) .width() всегда возвращает одно и то же значение.

В приложении значение, возвращенное первоначально или когда «панель» скрыто, является правильным, но когда оно видно, возвращаемое значение составляет 17 пикселей меньше.

Что может повлиять на значение, возвращаемое jQuery?

Answer 1

Как уже указывалось, это, вероятно, полоса прокрутки, которая меняет ситуацию. Чтобы вычислить ширину без полосы прокрутки, вам придется заставить тело скрыть их, пока вы выполняете вычисления. Что-то вроде этого:

//hide the scrollbars 
$('body').css({overflow: 'hidden'}); 
//get the window width here 
var windowWidth = $(window).width(); 
//and now we put the scrollbars back 
$('body').css({overflow: 'auto'});