我有一个大的垂直滚动元素，在里面有一个较小的水平滚动元素。 (见片段)
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/