在使用vh(视口高度)滚动时再次显示div,可以通过监听滚动事件并计算滚动距离来实现。
首先,需要给滚动容器添加一个滚动事件监听器,可以使用JavaScript的addEventListener方法来实现。在滚动事件的回调函数中,可以获取滚动距离,并根据需要的条件来判断何时显示div。
以下是一个示例代码:
// 获取滚动容器元素
var container = document.getElementById('scroll-container');
// 获取需要显示的div元素
var divToShow = document.getElementById('div-to-show');
// 添加滚动事件监听器
container.addEventListener('scroll', function() {
// 获取滚动距离
var scrollDistance = container.scrollTop;
// 判断滚动距离是否满足条件
if (scrollDistance >= window.innerHeight) {
// 显示div
divToShow.style.display = 'block';
} else {
// 隐藏div
divToShow.style.display = 'none';
}
});
在上述代码中,我们首先获取了滚动容器元素和需要显示的div元素。然后,通过addEventListener方法给滚动容器添加了一个scroll事件监听器。在滚动事件的回调函数中,我们获取了滚动距离,并根据滚动距离是否大于等于视口高度来判断是否显示div。如果满足条件,则将div的display属性设置为'block',否则设置为'none'来隐藏div。
需要注意的是,上述代码中的滚动容器元素和需要显示的div元素的id属性需要根据实际情况进行修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行评估。
领取专属 10元无门槛券
手把手带您无忧上云