问题描述
你能告诉我如何使用javascript滚动元素吗？实际上，我已经创建了一个演示应用程序。 “左为正”时我可以离开，但当左为负时无法滚动。
我创建了两个案例。第一个案例工作正常。当我单击按钮时，它会滚动到 100 像素。但在第二种情况下，我无法滚动否定，为什么？这是我的代码
function handler(){
document.querySelector(".p").scroll({
left:100,behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click",handler,false)
function handler2(){
document.querySelector(".p2").scroll({
left:-100,behavior: 'smooth'
})
}
document.getElementById("button2").addEventListener("click",handler2,false)
https://jsbin.com/mahohoquge/edit?html,output
- 情况 1：工作正常
**
1. 2. 情况 2：工作不正常
**
有什么想法吗？如何滚动
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
case : 2
<div class="p2">
<div class="b r2">1</div>
<div class="b g2">1</div>
<div class="b bl2">1</div>
</div>
<button id="button2">move left</button>
</body>
</html>
解决方法
如果您想实现轮播效果，使用transform: translate() 函数而不是使用滚动会更有效。 https://jsbin.com/kiditahado/edit?html,output 原始片段中经过编辑的片段显示了您是如何做到的。
let start = 0;
function handler(step){
const p = document.querySelectorAll(".p div");
start+=step
p.forEach(el=>{
el.style.transform =`translate(${start}px,0)`
})
}
潜在的问题是你不能把它变成负值。我想到的唯一解决方案是反转块并从右侧滚动。
所以 css 变成了：
.p2{
position:relative;
width:100px;
height:100px;
overflow:hidden;
left:50%;
}
.b2{
width:100px;
height:100px;
position:absolute
}
.r2 {
background-color:red;
left:200px;
}
.bl2 {
background-color:blue;
left:100px;
}
.g2 {
background-color:green;
left:0px;
}
然后JS变成：
function handler2(){
document.querySelector(".p2").scroll({
left:100,behavior: 'smooth'
})
}
// start from the other side
document.querySelector(".p2").scroll({left:200});
document.getElementById("button2").addEventListener("click",handler2,false)