[英]Executing Javascript only if min-width is 800px
For my project I want a parallax scrolling effect only if the screen size is equal or wider than 800px. 对于我的项目,仅当屏幕尺寸等于或大于800px时,我才需要视差滚动效果。 To do this I wrote following code:
为此,我编写了以下代码:
<script>
if (window.screen.width >= 800) {
function parallax() {
var parallax = document.getElementById("box01");
parallax.style.top = -(window.pageYOffset / 4) + "px";
}
}
window.addEventListener("scroll", parallax, false);
</script>
The parallax scrolling works fine but the "window.screen.width" command is ignored by the browser. 视差滚动工作正常,但浏览器将忽略“ window.screen.width”命令。 Means: The parallax scrolling is also enabled for screen smaller than 800px.
意思是:小于800像素的屏幕也启用了视差滚动。
Any help is appreciated! 任何帮助表示赞赏!
What you're looking for is window.matchMedia . 您正在寻找的是window.matchMedia 。
function executeIfMinWidth800 (e) {
if (window.matchMedia('(min-width: 800px)').matches) {
// do stuff
}
}
// call initially
executeIfMinWidth800();
// add handler for resize
window.addEventListener('resize', executeIfMinWidth800);
window.screen
gets you the size of the monitor . window.screen
让您获得显示器的大小。
What you want is the size of the viewport , accessible via: 您想要的是视口的大小,可通过以下方式访问:
// width
window.innerWidth
// height
window.innerHeight
You should try this 你应该试试这个
if (window.matchMedia('(min-width: 800px)').matches) {
function parallax() {
var parallax = document.getElementById("box01");
parallax.style.top = -(window.pageYOffset / 4) + "px";
}
} else {};
window.addEventListener("scroll", parallax, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.