css 样式div框可上下滑动 滑动隐藏 随着鼠标下滑展示下面内容
时间: 2023-11-02 13:45:41 浏览: 174
div 鼠标画过样式
您可以使用CSS属性overflow来实现div框可以上下滑动,同时使用position和top/right/bottom/left属性来调整div框的位置。关于滑动隐藏或鼠标下滑自动展示下面内容的效果,您可以使用JavaScript来实现。具体方法请参考以下代码:
CSS样式:
div {
height: 200px; /* 设置div的高度 */
overflow: auto; /* 设置div可以上下滑动 */
position: fixed; /* 固定div的位置 */
bottom: 0; /* 将div放置在页面底部 */
right: 0; /* 将div放置在页面右侧 */
}
JavaScript代码:
var lastScrollTop = 0;
window.addEventListener("scroll", function(){ // 监听滚动事件
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){ // 如果鼠标往下滑动
document.querySelector("div").style.display = "none"; // 隐藏div
} else {
document.querySelector("div").style.display = "block"; // 展示div
}
lastScrollTop = st <= 0 ? 0 : st;
}, false);
阅读全文