我在使用 Laravel 10 时遇到了问题。我需要通过按按钮滚动到下一个元素。我已经尝试过 myelement.scrollIntoView() 和 window.scrollTo() 函数,但没有成功,出了什么问题?
我的js:
import {polyfill, scrollIntoView} from "seamless-scroll-polyfill";
polyfill();
var Controls = {
questions: document.getElementsByClassName('question'),
center_questions: document.getElementsByClassName('center-question'),
nextbuttons: document.getElementsByClassName('next'),
prevbuttons: document.getElementsByClassName('prev'),
header: document.getElementById('header'),
init: function (){
for (let button of this.nextbuttons) {
button.addEventListener("click", e => {
this.nextslide(e);
} );
}
for (let button of this.prevbuttons) {
button.addEventListener("click", e => {
this.prevslide(e);
} );
}
},
nextslide: function (e) {
let id = e.target.closest(".question").firstElementChild.id;
var question = document.getElementById(parseInt(id) + 1);
window.scrollTo( 0, window.innerHeight );
},
prevslide: function (e) {
let id = e.target.closest(".question").firstElementChild.id;
document.getElementById(parseInt(id) - 1).scrollIntoView({ behavior: "smooth", block: "center"});
},
}
window.onload = Controls.init();
最佳答案
我无法确切理解为什么您的代码片段不起作用,因为您没有有效的示例,但请使用我创建的尽可能接近您的代码的示例作为引用以使其工作:)
var Controls = {
questions: document.getElementsByClassName('question'),
nextbuttons: document.getElementsByClassName('next'),
prevbuttons: document.getElementsByClassName('prev'),
header: document.getElementById('header'),
init: function() {
for (let button of this.nextbuttons) {
button.addEventListener("click", e => {
this.nextslide(e);
});
}
for (let button of this.prevbuttons) {
button.addEventListener("click", e => {
this.prevslide(e);
});
}
},
nextslide: function(e) {
let id = e.target.closest(".question").firstElementChild.id;
var question = document.getElementById(parseInt(id) + 1);
question.scrollIntoView({ behavior: "smooth", block: "center"});
},
prevslide: function(e) {
let id = e.target.closest(".question").firstElementChild.id;
document.getElementById(parseInt(id) - 1).scrollIntoView({ behavior: "smooth", block: "center"});
},
};
Controls.init();
#container {
height: 200px;
overflow: scroll;
}
#header {
background-color: #f2f2f2;
padding: 10px;
}
.question {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
h2 {
margin: 0;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
<div id="container">
<div id="header">Header</div>
<div class="question">
<h2 id="1">Question 1</h2>
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
<div class="question">
<h2 id="2">Question 2</h2>
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
<div class="question">
<h2 id="3">Question 3</h2>
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
</div>
关于javascript - 在 Laravel 10 上不可能使用scrollIntoView和scrollTo,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/76546041/