我的页面上有一个滚动元素(使用 jScrollPane jQuery 插件)。我想要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做响应式布局,我希望当浏览器低于一定宽度时关闭此滚动功能。当我刷新页面时,我能够使其工作,但是当我调整浏览器窗口大小时,宽度值不会即时更新。
现在,如果我从 1000 像素宽的窗口开始,然后将其大小调整为 350 像素,则滚动功能仍然存在。我希望浏览器宽度达到 440px 时立即关闭滚动功能。
这是我到目前为止的代码..
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
-堵塞。将公共代码放在一个函数中,然后绑定事件,并调用该函数:
$(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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)