scrollIntoView 和焦点问题答案

【问题标题】：Issue with scrollIntoView and focusscrollIntoView 和焦点问题
【发布时间】：2013-10-04 06:08:33
【问题描述】：

var mediaIdForFocus = '<?php echo $this->mediaIdForFocus; ?>';
if(mediaIdForFocus)
$('#flagimg'+mediaIdForFocus).get(0).scrollIntoView().addClass("selectedMedia"); // highlight class
$('.logoTxt').focus();

我正在尝试调整 div $('#flagimg'+mediaIdForFocus) 的滚动，然后将焦点放在元素 $('.logoTxt') 上

滚动视图已调整为元素$('#flagimg'+mediaIdForFocus)，但$('.logoTxt').focus(); 未提供焦点。它只发生在第一次。如果我刷新页面，它会按预期工作。

请帮帮我。

【问题讨论】：

标签： javascript php jquery zend-framework

【解决方案1】：

要平滑地将元素滚动到视图中并将焦点设置在它上面，您可以执行类似的操作

elm.scrollIntoView({behavior: 'smooth', block: 'center'});
elm.focus({preventScroll: true});

【讨论】：

【解决方案2】：

$(document).scrollTop(0); 成功了

代码如下

// for setting the focus to selected media if it is chosen from media page.
var mediaIdForFocus = '<?php echo $this->mediaIdForFocus; ?>';
if(mediaIdForFocus)
   $('#flagimg'+mediaIdForFocus).get(0).scrollIntoView(); // highlight class
$(document).scrollTop(0);

【讨论】：

$(document).scrollTop(0);只是转到页面顶部。如果您要添加 '$(document).scrollTop(0);'，您上面的陈述就没有意义了
@JacobvanLingen van Lingen $('#flagimg'+mediaIdForFocus).get(0).scrollIntoView();将调整 $('#flagimg'+mediaIdForFocus) 的滚动条并将焦点设置为 $('#flagimg'+mediaIdForFocus)，然后 $(document).scrollTop(0);将整个文档滚动到顶部

【解决方案3】：

问题可能是代码行$('#flagimg'+mediaIdForFocus).get(0).scrollIntoView().addClass("selectedMedia");

.get(0) 返回普通元素，因此 jQuery 包装器消失了。 .addClass() 是 jQuery 函数，无法在普通元素上执行 jQuery 函数。

所以首先添加类，然后在视图中滚动元素： $('#flagimg'+mediaIdForFocus).addClass("selectedMedia").get(0).scrollIntoView();

【讨论】：