我尝试使用 jInvertScroll，这样我的页眉背景图像会在向下滚动时向左滚动，然后当它到达图像的右边界时整个网站继续作为普通网页。 不幸的是，现在图片以某种方式向右滚动，我不知道为什么。
我尝试切换我的 html，主要是我的 css(例如 top:0 而不是 bottom:0 等)。由于我刚刚开始学习 js，所以我无法修复或修改它的 javascript 部分。
带有嵌入式 javascript 的 HTML:
<body>
<header>
<div class="background scroll">
<img src="media/header.png" alt="background image" class="background_img"/>
</div>
</header>
<script type="text/javascript" src="resources/javascript/jquery-3.4.1.js"></script>
<script type="text/javascript" src="resources/javascript/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 3000,
onScroll: function(percent) {
console.log(percent);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
</script>
</body>
对应的CSS:
.background {
z-index: 1;
}
.background_img {
height: 100vh;
width: auto;
position: absolute;
}
body
{
overflow-x: hidden;
}
.scroll {
width: auto;
height: auto;
position: fixed;
top: 0;
left: 0;
}
最佳答案
Nvm 搞定了，是 css 代码部分 position:absolute
把我搞砸了
关于javascript - 水平滚动的 jInvertScroll 方向错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56826761/