我的页面上有一个滚动元素(使用jScrollPane jQuery插件)。我想要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做一个响应式布局,我希望当浏览器低于一定宽度时关闭滚动功能。我可以在刷新页面时使其工作,但是当我调整浏览器窗口的大小时,宽度值不会动态更新。
现在,如果我从1000px宽的窗口开始,然后将大小调整到350px,滚动功能仍然存在。我希望在浏览器宽度达到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
});
}
发布于 2012-03-15 21:06:08
更改变量并不能在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);
});
发布于 2012-03-15 21:05:48
将if条件放在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
});
}
});
发布于 2017-04-13 22:28:28
当屏幕尺寸低于768px时,我隐藏了一些Id元素,当屏幕尺寸高于768px时,显示出来了。它工作得很好。
var screensize= $( window ).width();
if(screensize<=768){
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
}
}
else{
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
}
}
changething = function(screensize){
if(screensize<=768){
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
}
}
else{
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
}
}
}
$( window ).resize(function() {
var screensize= $( window ).width();
changething(screensize);
});
https://stackoverflow.com/questions/9720294
复制相似问题