vanilla javascript图像缩放滚动效果
Posted
技术标签:
【中文标题】vanilla javascript图像缩放滚动效果【英文标题】：vanilla javascript image zoom scroll effect 【发布时间】：2021-08-01 19:56:57 【问题描述】：我正在尝试在 vanilla javascript 中重新创建这个简单的 jquery 图像缩放滚动效果，但没有成功： 我在网上看，所有教程似乎都使用自 2014 年以来不受支持的 jquery 或 skrollr 库。 这是youtube上这个效果的教程： https://www.youtube.com/watch?v=hjeS8HxH3k0
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Zoom Scroll Effect</title>
<style>
body
margin: 0;
padding: 0;
div
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
div img
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
/* BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT */
.whitespace
width: 100%;
height: 100vh;
</style>
<!-- JQUERY CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="img-area">
<img
src="https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg"
/>
</div>
<!-- BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT -->
<div class="whitespace"></div>
<script>
// JQUERY
$(window).scroll(() =>
let scroll = $(window).scrollTop();
$('.img-area img').css(
width: 100 + scroll / 5 + '%',
);
);
// VANILLA JS
// window.addEventListener('scroll', () =>
// let scroll = window.scrollTop;
// document.querySelector('.img-area img').style.width =
// 100 + scroll / 5 + '%';
// );
</script>
</body>
</html>
我已经注释掉了我的原版 javascript 代码。
【问题讨论】：
你的代码给你带来了什么问题，使用它而不是 jquery 版本的结果是什么？您是否在浏览器控制台中看到任何错误？ 那么会发生什么？有什么错误吗？除了 jQuery 版本将循环所有匹配选择器的元素，你只定位第一个它看起来应该可以工作的元素 用户 Svela 回答了我的问题。谢谢。 【参考方案1】：窗口对象没有属性 scrollTop。使用 document.documentElement：
window.addEventListener('scroll', () =>
let scrollTop = document.documentElement.scrollTop;
document.getElementById('test').style.width = 100 + scrollTop / 5 + '%';
);
查看工作小提琴：https://jsfiddle.net/z3hux1ra/5/
【讨论】：
非常感谢。这就是我的代码所缺少的。以上是关于vanilla javascript图像缩放滚动效果的主要内容，如果未能解决你的问题，请参考以下文章
Vanilla JavaScript：调整字体大小以适应容器