Question

如果某个元素为@Override public int getCount() { return mItemsList.size(); } @Override public Object getItem(int position) { return mItemsList.get(position); } @Override public long getItemId(int position) { return position; } @Override public int getViewTypeCount() { return 2; } @Override public int getItemViewType(int position) { if (mItemsList.get(position).getValue().equals(mContext.getString(R.string.stub))) { return STUB; } return ITEM; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (getItemViewType(position) == ITEM) { return itemView(position, convertView); } return stubView(convertView); }并且我们使用浏览器的文本搜索功能来查找该元素中的文字，但它不可见，则Chrome会移动该元素，以便搜索结果将对用户可见。

你可以在这里看到这种情况：http://codepen.io/anon/pen/qdayVz 打开Chrome中的链接，然后搜索不在可见的文本中，＆＃34; CCC＆＃34;例如，您会看到Chrome会移动元素以显示找到的文字。

以下是一个真实世界的示例：http://www.jssor.com/demos/full-width-slider.html - 搜索不在可见幻灯片中的文字。

在Firefox中不会发生这种情况。

Answer 1

我能够使用JavaScript阻止此行为。

当Chrome移动#wide-child div以显示搜索文本时，它实际执行的操作是滚动#parent的内容以将搜索文本滚动到视图中。这会触发预期的scroll事件，可以监听。当滚动事件触发时，可以将元素的滚动值重置为它应该的值（可能是0）。

示例：

＆＃13;

document.getElementById('parent').addEventListener('scroll', function(e){
  document.getElementById('parent').scrollLeft=0;
  console.log('Prevented scrolling');
});

＆＃13;

#parent {
  width: 30px;
  overflow: hidden;
}

#wide-child {
  width: 500px;
}

＆＃13;

<div id="parent">
  <div id="wide-child">
    AAAAAAA
    BBBBBBB
    CCCCCCC
    DDDDDDD
    EEEEEEE
  </div>
</div>

＆＃13;

显示文本搜索结果时，阻止Chrome移动DOM元素

1 个答案: