菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>
</head>
<body>
<h1>元素对象</h1>
<h2>scrollTop 与 scrollLeft 属性</h2>
<p>点击 "滚动" 按钮，设置 ID 为 "myDIV" 元素在每次点击按钮时水平方向滚动 50 像素，垂直方向滚动 10 像素：</p>
<button onclick="myFunction()">滚动</button><br><br>

<div id="myDIV">
  <div id="content">
  <p>DIV 中的一些内容。</p>
  <p>DIV 中的一些内容。</p>
  <p>DIV 中的一些内容。</p>
  <p>DIV 中的一些内容。</p>
  </div>
</div>

<script>
function myFunction() {
  var element = document.getElementById("myDIV");
  element.scrollLeft += 50;
  element.scrollTop += 10;
}
</script>

</body>
</html>
              