gpt4 book ai didi

javascript - 更改 DIV 的焦点以允许水平滚动

转载 作者:行者123 更新时间:2023-12-03 07:05:13 24 4
gpt4 key购买 nike

我有一个大的垂直滚动元素,在里面有一个较小的水平滚动元素。 (见片段)

body {
height: 100vh;
overflow: hidden;
}

.large {
height: 100%;
font-size: 32px;
overflow-y: scroll;
}

.tall {
height: 120%;
}

.small {
width: 100%;
overflow-x: scroll;
white-space: no-wrap;
}

.wide {
width: 120%;
}
<body>
<div class="large">
This is large content vertical content
<br><hr><br>
<div class="small">
<div class="wide">This is smaller horizontal content</div>
</div>
<div class="tall"></div>
</div>
</body>

当你悬停它时,大的垂直滚动很好垂直滚动,但我希望当你悬停水平内容时,它会自动滚动,这样用户就不必手动拖动滚动条来滚动。有什么方法可以用 HTML、CSS 或 JavaScript 做到这一点?

编辑

如果可能的话,我希望水平滚动由滚轮控制,而不是以一致的速度。

最佳答案

如果您想在纯 JavaScript 中执行此操作,请在您的鼠标位于 .small 中时逐渐调整 scrollLeft。当您离开 .small 时,我还添加了一个重置​​功能,因为我认为这会带来更好的用户体验。

var scrollInterval = null;

function scrollElement(ele) {
scrollInterval = setInterval(function() {
ele.scrollLeft += 1;
}, 1);
}

function reset(ele) {
clearInterval(scrollInterval);
ele.scrollLeft = 0;
}
body {
height: 100vh;
overflow: hidden;
}

.large {
height: 100%;
font-size: 32px;
overflow-y: scroll;
}

.tall {
height: 120%;
}

.small {
width: 100%;
overflow-x: scroll;
white-space: no-wrap;
}

.wide {
width: 120%;
}
<div class="large">
This is large content vertical content
<br>
<hr><br>
<div class="small" onmouseenter="scrollElement(this);" onmouseleave="reset(this);">
<div class="wide">This is smaller horizontal content</div>
</div>
<div class="tall"></div>
</div>


如果您希望滚动由鼠标滚轮控制而不是自动滚动,您可以这样做:

function scrollHorizontally(e) {
e = window.event || e;
var delta = e.wheelDelta || -e.detail;
document.getElementsByClassName('small')[0].scrollLeft -= delta; // Multiplied by 40
e.preventDefault();
}

function bindHorizontalMouseWheel(ele) {
if (ele.addEventListener) {
// IE9, Chrome, Safari, Opera
ele.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
ele.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
ele.attachEvent("onmousewheel", scrollHorizontally);
}
}

window.addEventListener('load', function() {
bindHorizontalMouseWheel(document.getElementsByClassName('small')[0]);
});
body {
height: 100vh;
overflow: hidden;
}

.large {
height: 100%;
font-size: 32px;
overflow-y: scroll;
}

.tall {
height: 120%;
}

.small {
width: 100%;
overflow-x: scroll;
white-space: no-wrap;
}

.wide {
width: 120%;
}
<div class="large">
This is large content vertical content
<br>
<hr><br>
<div class="small">
<div class="wide">This is smaller horizontal content</div>
</div>
<div class="tall"></div>
</div>

归功于 this post对于其中的一些代码。

关于javascript - 更改 DIV 的焦点以允许水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59513191/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com