This html文件显示了一个3面板布局。当我改变面板时，“left”属性上的css过渡给了我一个很好的滑动效果。这一切都正常，但是当我改变面板时，我想把焦点放在新面板的输入上。有人能告诉我为什么调用焦点（）中断了css转换，并使我停留在两个面板之间的中间位置？它只会向前发生。如果我注解掉转换，它会起作用;如果我使用超时延迟对focus（）的调用，它会起作用。问题出现在Chrome、IE和Firefox中。第一个
jyztefdp1#
正如@user1585345正确指出的那样，浏览器会立即滚动到焦点元素，以便将其带入当前视图，而不是进一步的px！这里发生的情况如下：您更改了元素的相对位置，但您立即更改了焦点，因为事件触发时焦点元素是不可见的，所以内容也会 * 滚动 *（突然结束动画）。您应该仅在动画完成时显式触发焦点，以便浏览器识别出不需要滚动。一种解决方案是（@Mark建议）有两个事件侦听器“ontransitionend”和“onanimationend”，您可以为其添加事件，然后触发focus（）函数
nimxete22#
正如在另一个答案中提到的，focus()滚动到元素，并在视觉上中断任何过渡中间流。如果您不想依赖侦听器，并且根据您的要求，可以在调用focus()方法时使用preventScroll: true标志。
focus()
preventScroll: true
input.focus({ preventScroll: true })
请参阅这里的MDN文档，并检查浏览器的兼容性。不是所有的浏览器都支持此功能，但很多浏览器都支持。
2条答案
按热度按时间jyztefdp1#
正如@user1585345正确指出的那样，浏览器会立即滚动到焦点元素，以便将其带入当前视图，而不是进一步的px！
这里发生的情况如下：您更改了元素的相对位置，但您立即更改了焦点，因为事件触发时焦点元素是不可见的，所以内容也会 * 滚动 *（突然结束动画）。
您应该仅在动画完成时显式触发焦点，以便浏览器识别出不需要滚动。
一种解决方案是（@Mark建议）
有两个事件侦听器“ontransitionend”和“onanimationend”，您可以为其添加事件，然后触发focus（）函数
nimxete22#
正如在另一个答案中提到的，
focus()滚动到元素，并在视觉上中断任何过渡中间流。如果您不想依赖侦听器，并且根据您的要求，可以在调用
focus()方法时使用preventScroll: true标志。请参阅这里的MDN文档，并检查浏览器的兼容性。不是所有的浏览器都支持此功能，但很多浏览器都支持。