jQuery:如何动态检测窗口宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (73)

我的页面上有一个滚动元素(带有jScrollPanejQuery插件)。我想要完成的是通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做一个响应的布局,我希望这个滚动功能被关闭时,浏览器是在一定宽度以下。当我刷新页面时,我能够使它工作,但是当我调整浏览器窗口的大小时,宽度值不会动态更新。

现在,如果我从一个1000 px宽的窗口开始,那么调整大小到350 px,滚动功能仍然保持不变。我希望只要浏览器宽度达到440 px,滚动功能就会关闭。

这是我到目前为止的代码..。

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}
提问于
用户回答回答于

更改一个变量不会在if-block 内执行代码。将通用代码放在一个函数中,然后绑定事件,并调用该函数:

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});
用户回答回答于

把你的条件放进去resize函数:

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});

扫码关注云+社区

领取腾讯云代金券