英文:
JavaScript function not working at all when putting sections inside div
问题
I created a function that works when I remove the div with class "scroll-container", but whenever I put the sections inside the div, the function is not working at all, how can I solve this?
我创建了一个函数，当我删除具有类名"scroll-container"的div时，它可以正常工作，但是当我将部分放在这个div内时，函数完全不起作用，我该如何解决这个问题？
英文:
I created a function that works when I remove the div with class "scroll-container", but whenever I put the sections inside the div, the function is not working at all, how can I solve this?
Literally you remove the div code and it works, not sure if I have to call the div class on my JavaScript somehow...
HTML
<body>
<div class="scroll-container">
<section style="background-image: url('https://static.vecteezy.com/system/resources/previews/005/267/025/original/mountain-landscape-with-silhouettes-of-forest-trees-perfect-to-use-for-background-dark-blue-color-silhouette-free-vector.jpg'); display: inline-block;" class="active" id="sec1">
<div class="content">
<h1>David Grillo</h1>
<h2><b>Sobre Mí</b></h2>
</div>
</section>
<section style="background-image: url('https://4kwallpapers.com/images/wallpapers/blue-mountains-foggy-mountain-range-landscape-scenery-5k-1920x1080-5939.jpg'); display: inline-block;" class="" >
<div class="content">
<h1>David Grillo</h1>
<h2><b>Sobre Mí</b></h2>
</div>
</section>
<section style="background-image: url('https://tesla-cdn.thron.com/delivery/public/image/tesla/ddc135ed-1638-40fb-8ab1-f8045059ecef/bvlatuR/std/4096x2560/Homepage-Model-X-Desktop-LHD'); display: inline-block;" class="" >
<div class="content">
<h1>David Grillo</h1>
<h2><b>Sobre Mí</b></h2>
</div>
</section>
<section style="background-image: url('https://tesla-cdn.thron.com/delivery/public/image/tesla/16b04537-a4be-4bf9-8637-86862a858da8/bvlatuR/std/2880x1800/_25-HP-SolarPanels-D'); display: inline-block;" class="" >
<div class="content">
<h1>David Grillo</h1>
<h2><b>Sobre Mí</b></h2>
</div>
</section>
<section style="background-image: url('https://tesla-cdn.thron.com/delivery/public/image/tesla/c877126e-0db5-409d-a412-04fc94b59b76/bvlatuR/std/2880x1800/HP-SR-Design-D'); display: inline-block;" class="" >
<div class="content">
<h1>David Grillo</h1>
<h2><b>Sobre Mí</b></h2>
</div>
</section>
<script src="dgscript.js" type="text/javascript"></script>
</div>
</body>
CSS
@font-face {
font-family: 'freedom';
src: url(fonts/Mefika.ttf);
font-style: normal;
font-weight: 100;
}
html ::-webkit-scrollbar{
display: none;
}
html{
scroll-behavior: smooth;
}
.scroll-container {
overflow-y: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
background-position: center;
background-size: cover;
overflow-y: y mandatory;
}
section {
height: 100vh;
object-fit: cover;
object-position: center;
}
section {
width: 100%;
background-size: cover;
background-position: center center;
scroll-snap-align: start;
scroll-snap-stop: always;
}
body {
margin: 0;
transition: 1s;
}
JavaScript
document.lastScrollPosition = 0;
document.lastCentered = 0;
document.onWayTo = null;
let timeout
var wheel_timer = 0
$(document).ready(function() {
document.addEventListener('scroll', () => {
const direction = window.pageYOffset - document.lastScrollPosition > 0 ? 'down' : 'up';
const sections = [...document.querySelector('scroll-container'),document.querySelectorAll('section')];
event.preventDefault();
if (document.onWayTo === null) {
const destIndex = direction === 'up' ? document.lastCentered - 1 : document.lastCentered + 1;
if (destIndex >= 0 && destIndex < sections.length) {
console.log({destIndex,direction});
document.onWayTo = destIndex;
window.scroll(1, sections[destIndex].offsetTop);
}
}
var timer = setInterval( () => {
sections.forEach((section,index) => {
if (window.pageYOffset === section.offsetTop) {
clearInterval(timer);
document.lastCentered = index;
section.className = 'active'
if (document.onWayTo === index) {
document.onWayTo = null;
}
} else {
section.className = '';
}
const content = document.querySelector("html");
document.addEventListener("wheel", () => {
event.preventDefault();
// getting the scrolling speed.
let deltaY = event.deltaY;
// decreasing the scrolling speed by 50 times
let speed = event.deltaY / 0.3;
// scrolling the content of the div element
content.scrollTop += speed;
console.log(deltaY);
},{passive:false});
})
}, 500);
console.log(direction);
document.lastScrollPosition = window.pageYOffset;
/* scroll limit */
let page = document.querySelector("html")
event.deltaY = 0
})
})
答案1
得分: 1
你试图使用document.querySelector选择具有类名"scroll-container"的元素，但你忘记在"scroll-container"前面加上一个点来表示它是一个类选择器。正确的代码应该是：
// 正确的代码
const sections = [...document.querySelectorAll('.scroll-container section')];
英文:
You are trying to select the element with the class "scroll-container" using document.querySelector, but you forgot to add a dot before "scroll-container" to indicate that it is a class selector. The correct code should be:
// Correct code
const sections = [...document.querySelectorAll('.scroll-container section')];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论