如何使用 javascript 滚动元素？

Question

你能告诉我如何使用 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,js,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>

Answer 1

如果您想实现轮播效果，使用转换会非常有效： translate() function 而不是使用滚动。 https://jsbin.com/kiditahado/edit?html,css,js,output this edited snippet from your original one shows how you could do it.

let start = 0;
function handler(step){
 const p = document.querySelectorAll(".p div");
  start+=step
  p.forEach(el=>{

  el.style.transform =`translate(${start}px,0)`

  })

}

Answer 2

潜在的问题是你不能陷入负值。 我想到的唯一解决方案是反转块并从右侧滚动。

所以 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)

如何使用 javascript 滚动元素？

问题描述

2 个解决方案

解决方案1
2 2021-03-03 12:41:29

解决方案2
0 2021-03-03 11:29:11

如何使用 javascript 滚动元素？

问题描述

2 个解决方案

解决方案1 2 2021-03-03 12:41:29

解决方案2 0 2021-03-03 11:29:11

解决方案1
2 2021-03-03 12:41:29

解决方案2
0 2021-03-03 11:29:11