javascript - 如何防止自动滚动到聚焦输入？

Question

在点击或点击时，我需要聚焦一个不在视口(viewport)中但在动画中的输入。但是由于浏览器如何立即将聚焦的元素滚动到 View 中，我的转换搞砸了。

所以简单的问题是，如何防止焦点输入/文本区域元素的自动滚动？

这是一个不良行为的例子:

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 })

参见 WHATWG thread在 GitHub 上。