如何将 div 滚动到顶部或左侧以查看动态创建的元素？

Question

我在具有负边距的 div 内动态创建 div，但我的 div 外部滚动器没有激活滚动并查看那些动态创建的 div。

HTML代码


<html>
<body align="center">

  <div id "TC" class = "Tile_container">
  </div>

</body>
</html>

在这里，我正在创建带有 x 滚动和 y 滚动的 tile 容器。

CSS代码

.Tile_container
{
  height: 500px;
  width: 500px;
  background-color: lightgray;
  position: relative;
  overflow-x: scroll;
  overflow-y: scroll;
}

JS代码

$(document).ready(function () {

  var tileContainer = document.getElementsByClassName("Tile_container")[0];

  var newTile = document.createElement("div");

  newTile.setAttribute("class", "PlayerTile");

  var strTop = "" + (-100) + "px";

  var strLeft  = ""+ (-100) + "px";

  newTile.style.left = strLeft;
  newTile.style.top = strTop;

  tileContainer.appendChild(newTile);

});

当我在 position 比 Tile_container div 维度创建内部 div 时，我的滚动条正在激活。

谁能告诉如何滚动并查看那些创建的 div。 在那个 div 中，我还有其他要添加的功能。

Answer 1

您已将PlayerTile从父 div 的顶部和左侧移开。

overflow-x和overflow-y不会滚动超出顶部或左侧的内容。

向右和向下滚动工作正常。

 var tileContainer = document.getElementById("TC"); window.onload = (function() { var newTile = document.createElement("div"); newTile.id = 'newtile'; newTile.setAttribute("class", "PlayerTile"); tileContainer.appendChild(newTile); }); function moveTile(direction, value) { const tile = document.getElementById('newtile'); if (direction === 'horizontal') { tile.style.left = Number(tile.style.left.replace('px', '')) + value + 'px'; } else { tile.style.top = Number(tile.style.top.replace('px', '')) + value + 'px'; } } const moveRight = () => moveTile('horizontal', 60); const moveLeft = () => moveTile('horizontal', -60); const moveUp = () => moveTile('vertical', -12); const moveDown = () => moveTile('vertical', 12); function reset() { const tile = document.getElementById('newtile'); tile.style.left = tile.style.top = '12px'; }

 .Tile_container { height: 140px; width: 90%; background-color: lightgray; position: relative; overflow-x: scroll; overflow-y: scroll; }.PlayerTile { height: 100px; width: 200px; background-color: dodgerBlue; position: absolute; top: 12px; left: 12px; }

 Move Tile: <button onclick="moveRight()">Right</button> <button onclick="moveLeft()">Left</button> <button onclick="moveUp()">Up</button> <button onclick="moveDown()">Down</button> <button onclick="reset()">Reset</button><br/> <div id="TC" class="Tile_container"></div>

如何将 div 滚动到顶部或左侧以查看动态创建的元素？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-16 17:53:54

如何将 div 滚动到顶部或左侧以查看动态创建的元素？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-16 17:53:54

解决方案1
0 已采纳 2020-05-16 17:53:54