调整1个元素的窗口宽度会发生变化吗？

Question

我正在制作一个2块网页，1需要使用jquery的resizable()功能调整大小。当一个调整大小时，第二个块也需要改变其宽度。 我使用以下jquery代码：

$(document).ready(function(){
   $(window).bind('resize', function(){

         var left_width = $(".left").width();
         var right_width = $(".middle").width() - left_width;

         $(".right").width(right_width);
   });

   $(".left").resizable();
});

问题是，由于某种原因，$(window).width()不断变化，我无法正确地将宽度分配给右侧块

Example

问题

这是我登录$(window).width()时控制台中出现的情况， 有时是1166年，有时是1183年。

Answer 1

滚动条在调整大小时显示了几分之一秒，略微缩小了窗口的大小。

当您计算第二个区域的新宽度时，这似乎有时会发生冲突，这会略微减小宽度。

Answer 2

使用Jquery .css。

$(document).ready(function(){
       $(window).bind('resize', function(){

             var left_width = $(".left").width();
             var right_width = $(".middle").width() - left_width;
             console.log(right_width);
            console.log(left_width);
            console.log('window ' + $(".middle").width());
             $(".right").css("width",right_width+"px");
       });

       $(".left").resizable();
    });

[编辑]我误解了这个问题，但不同之处在于浏览器的右滚动

Answer 3

窗口大小的变化是由于浏览器窗口右侧出现滚动条，因为$(window).width()计算了查看区域的大小。我的建议是在调整对象大小时将正文的overflow更改为hidden。它似乎至少在你的小提琴上起作用。