考虑以下布局，显示 5x4 正方形，其中一些在视图中隐藏，但其余的可以通过拖动来查看......
使用以下网格布局，我似乎无法向左/向右滚动，但向上/向下滚动却可以正常工作，我很困惑为什么会发生这种情况？
CSS：
body {
background: #046;
margin: 0;
padding: 0;
overflow: hidden;
}
.bottom {
width: 150vw;
height: 100vh;
display: grid;
grid-template: auto / auto auto auto auto auto;
overflow: hidden;
user-select: none;
}
.yellow {
background: yellow;
}
.white {
background: white;
}
.div {
height: 200px;
width: 200px;
}
HTML：
<body>
<div class="bottom" id="bottom">
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
<div class="div yellow"></div>
<div class="div white"></div>
</div>
</body>
Javascript：
var element = document.getElementById('bottom');
element.addEventListener("mousemove", function(event) {
if (event.buttons == 1) {
if (Math.abs(event.movementX) > Math.abs(event.movementY)) {
if (event.movementX > 0) element.scrollLeft = element.scrollLeft - event.movementX;
if (event.movementX < 0) element.scrollLeft = element.scrollLeft - event.movementX;
} else {
if (event.movementY > 0) element.scrollTop = element.scrollTop - event.movementY;
if (event.movementY < 0) element.scrollTop = element.scrollTop - event.movementY;
}
}
});
我找到了解决方案...
将宽度调整为 100vw，并将宽度应用于每个元素，以便一次显示 5 个元素中的 4 个：
.bottom {
width: 100vw;
}
.bottom > div {
width: calc(100vw / 4);
}