Question

当我实际使用鼠标点击我的div时，pageUp和pageDown滚动div。但是，当我以编程方式触发div上的单击时，pageUp和pageDown无法滚动div。如何让pageUp和pageDown滚动div而无需用户在div中进行物理点击？

详细信息：

我想要做的是让用户pageDown到div的底部，然后再一个pageDown将下一组内容加载到div中并自动滚动到顶部;对于pageUp反之亦然。只要用户在div中单击，它就会很好用。我试图这样做，所以他们不必实际点击div以便能够通过pageDown或pageUp滚动。

我确信会发生程序化点击，因为点击事件侦听器会被触发。我的pageUp监听器也可以加载上一组内容（因为滚动条从顶部开始）。

我在Node-Webkit（Chrome）和angular.js中开发，但是跨浏览器支持也是必要的。

我尝试过的事情：

$('#div').click();
$('#div')[0].click();
$('#div').trigger('click');
$('#div').focus();
$('.focusableThingInsideDiv').focus();
$('#div').scroll();  //just trying random things at this point

我也试过停止默认浏览器行为并自己实现滚动（通过设置scrollTop）。这在技术上有效。但是，如果可能的话，我宁愿不覆盖默认行为。

Answer 1

单击<form id="survey" name="survey" action="SlideShow.html" method="post"> First Name:<br> <input type="text" id="fname" name="fname" required="required"><br> Last Name:<br> <input type="text" id="lname" name="lname" required="required"><br> Email:<br> <input type="email" id="mail" name="mail" required="required"><br> Phone Number:<br> <input type="text" id="phone" name="phone" required="required"><br><br> <input type="button" value="Submit" onclick="func()"> </form>后，页面向上和向下翻页工作，因为它获得了焦点。因此，虽然点击后它没有显示为聚焦元素，但您仍然需要div行。

棘手的部分是，为了能够以编程方式专注于$('#div').focus()，您需要为其div。像tabindex之类的东西会让焦点在Chrome中突然出现。

其他浏览器（IE和Firefox）似乎并不需要这样。 <div tabindex="0">...</div>将从一开始就有效，但添加focus()不会受到影响。

触发单击div，以便在页面向下和页面上滚动

1 个答案: