HTML 可水平拖动 DIV

Question

我是 html/css 的新手，目前正在尝试为 Smartphone-Webapp 制作水平可拖动滑块。

基本上我要搜索的是水平线上的三个 div，其中 div 1 和 3 不在视野范围内。如果我向左或向右拖动 div 2，则应显示 1 或 3。

我用 React 创建了我的应用程序，并且已经得到了 div 2 可以通过库拖动。

Answer 1

首先，制作一个parent div并在其中添加三个div。将 div 并排堆叠，对于 parent div 添加 overflow-x: scroll。每个 child 的宽度和高度应该与屏幕的宽度和高度一致。为此添加 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>

HTML 可水平拖动 DIV

HTML Horizontal draggable DIV

html

javascript

css

drag

reactjs