Question

ul.cars(data-ng-show="$ctrl.hasCars")
                li.skill("data-ng-repeat="car in $ctrl.cars")

每次添加时，如何让我的窗口自动滚动到最后一个？

Answer 1

正如评论中提到的，您可以使用Element.scrollIntoView()，您可以使用:last-child选择器来选择最后一个li。

以下是此实例的一个示例。

var list = document.querySelector('.list');
var button = document.querySelector('.updateList');

function updateList(){
	var number = Math.round(Math.random()*100);
	var li = document.createElement('li');
	li.textContent = number;
	list.appendChild(li);
	var lastLi = document.querySelector('.list li:last-child');
	lastLi.scrollIntoView();	
}

button.addEventListener('click', updateList);

.app{
	width: 100vw;
	height: 100vh;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button class="updateList">Update List</button>	
<div class="app"></div>	
<ul class="list">
	<li>hello</li>
	<li>World</li>
	<li>Whats up</li>
</ul>
</body>
</html>

以上代码为https://jsbin.com/beqovi/edit?html,css,output

的jsbin

添加时如何滚动到li

1 个答案: