Question

当我尝试在线搜索时，我会得到尝试以编程方式滚动网页的人的结果。那不是我的使命。我有一个website我浏览过，然后尝试使用键盘向上/向下或向上/向下翻页箭头滚动，但直到我点击主内容窗格（{{1} }）在右边。

我的问题是，我在页面底部的JavaScript中（或者在jQuery文档加载事件的末尾）写下什么才能使它滚动div.main-content？我试过了div，但这似乎没有效果。

Answer 1

大多数浏览器都不会让您关注任意元素，甚至是可滚动元素。尝试使用tabIndex属性/属性。

以下示例将tabIndex属性/属性设置为默认值（如果尚未设置）。

＆＃13;

var $mainContent = $('.main-content');
$mainContent.prop('tabIndex', $mainContent.prop('tabIndex'));
$mainContent.focus();

＆＃13;

.main-content {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  overflow: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-content">
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
</div>

＆＃13;

Answer 2

如果Div具有tabindex属性，则可以将其重点关注。

Jquery docs：

焦点事件在获得焦点时发送到元素。这个事件隐含地适用于有限的一组元素，例如形式元素（input，select等）和链接（a href）。在最近在浏览器版本中，事件可以扩展为包含所有元素通过显式设置元素的tabindex属性来定义类型。一个 element可以通过键盘命令获得焦点，例如Tab键，或通过鼠标点击元素。

所以你可以试试这个：

var used = false;
$(document).on('keydown', function(){ 
  if(!used){
    used = true;
    $('.main-content').attr("tabindex", -1).focus();
  }
 });

如何在页面加载时设置可滚动区域？

2 个答案: