HTML 水平可拖动 DIV

如何解决HTML 水平可拖动 DIV

我对 html/css 很陌生，目前正在尝试为 Smartphone-Webapp 制作一个水平可拖动滑块。

基本上希望我搜索的是水平线上的三个 div，其中 div 1 和 3 不在视野范围内。 如果我向左或向右拖动 div 2，应该会出现 1 或 3。

我正在使用 react 创建我的应用程序，并且已经可以通过库拖动 div 2。

解决方法

首先，创建一个 parent div 并向其添加三个 div。将 div 堆叠在一起，并为 parent div 添加 overflow-x: scroll。每个孩子的宽度和高度都应该与屏幕的宽度和高度相同。为此添加 min-width: 100vw; and min-height: 100vh;。

现在，要显示中央 div，必须移动 div 的滚动条。

parent.scrollLeft += document.querySelector(".C1").clientWidth; 这会将滚动条定位到中心。本质上，它会将滚动条移动屏幕的宽度。

运行代码段时向下滚动以查看水平滚动条。

var parent = document.getElementById("Parent");
parent.scrollLeft += document.querySelector(".C1").clientWidth;

* {
    margin: 0px;
    padding: 0px;
}

#Parent {
    overflow-x: scroll;
    display: flex;   
}

.C1,.C2,.C3 {
    min-width: 100vw;
    min-height: 100vh;
}

.C1 {
    background-color: red;    
}

.C2 {
    background-color: green;    
}

.C3 {
    background-color: blue;    
}

<div id="Parent">
    <div class="C1">
    </div>
    <div class="C2">
    </div>
    <div class="C3">
    </div>
</div>