[英]How to detect the browser size and change a javascript function control live
我正在使用fullpage.js( https://github.com/alvarotrigo/fullPage.js ),这是一个完整的页面滑块。
我没有开发经验,但是我想实现的目标是,例如说浏览器的大小为640px,fullpage.js函数将功能内的控件从切换为; autoScrolling:true,改为autoScrolling:false,
这就是函数的样子;
$(document).ready(function(){
$.fn.fullpage({
anchors: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact'],
navigation: true,
navigationPosition: 'right',
scrollingSpeed: 400,
autoScrolling: true,
navigationTooltips: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact']
});
});
原因是由于该插件的特性,在屏幕尺寸减小后,我的div和内容由于其中断而丢失了,因此通过操作不同的控件,我可以使较小的设备在不限制页面大小的情况下运行页面的自然滚动高度。
那么,有没有一种方法或脚本可以像CSS媒体查询一样识别正在缩小的屏幕,以便在具有特定断点的情况下操作javascript,然后在不同的断点使用不同的JavaScript?
如果这很愚蠢或很明显要问这不是我的专业领域(使用/编写/阅读JavaScript),我先向您道歉,但是可以这样做吗? 我正在考虑实现这种解决方案的逻辑是正确的方法,还是有更简单的方法?
谢谢
这样的事吗? (未测试)
$( window ).resize(function() {
var windowWidth = $( window ).width();
if (windowWidth < 640) {
$.fn.fullpage.setAutoScrolling(false);
}
else {
$.fn.fullpage.setAutoScrolling(true);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.