如果我转到下一个滑块，请滚动到某个部分的顶部？
[英]Scroll to top of a section if i go to the next slider?
问题描述
我正在尝试使用 html/CSS(/JavaScript) 制作一个滑块，但是如果我想在上一张幻灯片的底部时转到下一张幻灯片，则下一张也会转到与上一张相同的 y 位置一，所以底部。 所以我想要的是他总是滚动到文章的顶部。 有人知道怎么做这个吗？ 这是我的代码：
const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; });
html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 30%; margin-right: 8.1rem; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
<body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>
2 个解决方案
解决方案1
0 2020-10-21 15:54:53
您需要使用window.scroll({top: 0}) 。 更多 阅读。
const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; window.scroll({top: 0}) }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; window.scroll({top: 0}) }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; window.scroll({top: 0}) });
html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 30%; margin-right: 8.1rem; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
<body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>
解决方案2
0 已采纳 2020-10-21 16:26:18
不确定这是否有帮助，但 li 元素的顶部边距非常大，所以如果取消它，文章的顶部应该显示。我还修改了宽度并添加了填充，这样文本就不会重叠。
.slider li {
flex-basis: 100%;
justify-content: center;
align-items: center;
display: flex;
font-size: 2rem;
max-width: 33%;
margin-right: 8.1rem;
padding: 0 3% 0 3%;
margin-top: 0% !important;
}
const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; });
html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; align-items: center; justify-content: center; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 33%; margin-right: 8.1rem; padding: 0 3% 0 3%; margin-top: 0% !important; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
<body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>
如何使用检测键功能转到 Javascript 中的下一部分？
[英]How to I use the detect key function to go to the next section in Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.