我正在建立一个包含很多动画的网站。因此,我所有的容器都位于绝对位置。
这将导致箭头完全消失。它在每个div的结尾处阻塞。我的目标是仅使用箭头转到下一个div。
我正在尝试找到一种解决方案,当用户滚动到div的末尾时,该div将失去焦点并将其分配给下一个div。
像这样,如果用户在页面加载时使用箭头,则第一个div(我们称其为“ div-1”)将具有焦点,并且箭头将移动此“ div-1”的滚动。
但是在滚动“ div-1”结束时到达。重点将放在下一个div(我们将其称为“ div-2”)。因此,用户可以继续使用箭头进行导航,而无需使用鼠标。现在,箭头将自动滚动“ div-2”。
问题是聚焦功能无法完成工作,或者我可能不好用。
以下是提供我尝试操作示例的代码段。
$(".div-1").on("scroll", function (event) {
var eventTarget = event.target;
var scrollTop = $(eventTarget).scrollTop();
var elementHight = $(eventTarget).height();
var scrollMax = $(eventTarget)[0].scrollHeight;
/** If arrive at the end of the scrolling */
if (scrollTop + elementHight + 1 >= scrollMax) {
$(".div-2").focus();
}
});
jQuery(window).one("load", function () {
$(".div-1").focus();
});
div {
overflow: auto;
position: absolute;
top: 0;
height: 50px;
width: 50%;
margin: 0;
padding: 0;
}
.div-1 {
left: 0;
background-color: red;
}
.div-2 {
left: 50%;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-1">
<ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
</ul>
</div>
<div class="div-2">
<ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
</ul>
</div>