如何防止自动滚动到重点输入？

Question

在某些点击或点击时，我需要聚焦一个不在视口中的输入，但是要进行动画处理。但是由于浏览器会立即将聚焦元素滚动到视图中，我的转换被搞砸了。

所以简单的问题是，如何防止聚焦输入/ textarea元素的自动滚动？

以下是不受欢迎行为的示例：

http://jsbin.com/nejiwoy/edit?html,output

<div
	style="
		position: relative;
		top: 100px;
		left: 100px;
		width: 200px;
		height:100px;
		background: gray;
		overflow: hidden;
	">
	<div
		style="
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 200px;
			background: green;
		">
		<input 
			style="
				position: absolute;
				top: 100px;
				height: 100px;
				width: 100%;
				background: yellow;
				border: none;
			">
	</div>
</div>

<button onclick="document.body.querySelector('input').focus()">focus</button>

Answer 1

对此有一个边界修补程序-已测试，并且可以在最新的Chrome中运行。使用

element.focus({ preventScroll: true })

请参阅GitHub上的WHATWG thread。