打字稿可拖动滑块答案

【问题标题】：Typescript draggable slider打字稿可拖动滑块
【发布时间】：2020-02-23 05:58:34
【问题描述】：

我需要帮助才能在 TS 中创建可拖动的滑块。我能够获得客户端和滚动位置，但我无法改变 ref scrollLeft 位置。它不会返回或抛出错误，只是不会改变 ref 的 scrollLeft 属性。

我已尝试记录返回 div ref 的 ref 属性，但 scrollLeft 位置始终为 0

import React, { useRef, useState } from "react";
import Nav from "./Nav";

const Services: React.FC = () => {
    const ref = useRef<HTMLDivElement | null>(null);
    const [state, setState] = useState({
        isDown: false,
        clientX: 0,
        scrollX: 0,
    });
    const onMouseDown = (e: React.MouseEvent<HTMLDivElement>): void => {
        e.persist();
        setState({
            ...state, isDown: true,
            clientX: e.clientX,
        });
    };

    const onMouseUp = () => {
        setState({ ...state, isDown: false });
    };
    const onMouseLeave = () => {
        setState({ ...state, isDown: false });
    };

    const onMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
        e.persist();
        if (!state.isDown) { return; }
        const { clientX, scrollX } = state;
        if (ref.current) {
            // console.log(ref.current.scrollLeft);
            ref.current.scrollLeft = scrollX + e.clientX - clientX;
            console.log(ref.current.scrollLeft, scrollX + e.clientX - clientX);
            // state.scrollX = scrollX + e.clientX - clientX;
            // state.clientX = e.clientX;
     }
    };
    return (
        <main>
            <Nav/>
            <div id="content">
                <div className="draggable-slider" ref={ref}
                    onMouseDown={onMouseDown}
                    onMouseUp={onMouseUp}
                    onMouseLeave={onMouseLeave}
                    onMouseMove={onMouseMove}>
                   <div className="slide">
                       <h3>.01</h3>
                       <h3>Basic</h3>
                       <div className="slide-image">1</div>
                   </div>
                   <div className="slide">
                        <h3>.02</h3>
                        <h3>Basic</h3>
                       <div className="slide-image">2</div>
                   </div>
                   <div className="slide">
                        <h3>.03</h3>
                        <h3>Basic</h3>
                       <div className="slide-image">3</div>
                   </div>
                   <div className="slide">
                        <h3>.04</h3>
                        <h3>Basic</h3>
                       <div className="slide-image">4</div>
                   </div>
               </div>
            </div>
        </main>
    );
};

export default Services;

CSS

.draggable-slider {
    position: relative;
    display: grid;
    padding: 1rem;
    width: 100%;
    grid-template-columns: repeat(4, 400px);
    grid-column-gap: 3em;
    top: 35vh;
    user-select: none;
    background-color: red;

    .slide {
      padding: 10px;
      line-height: 1;
    //   cursor: grab;

    // &.is-grabbing{
    //   cursor: grabbing;
    //    }

    ```

I want to be able to create the draggable slide by mutating the div scrollLeft position

【问题讨论】：

hmm... 在scrollX + e.clientX - clientX.. 中scrollX 和clientX 是不同的值吗？相反，const { clientX, scrollX } = state 是否按您的预期工作？
实际上.. 继续用您的相关 css 更新您的问题.. 因为不清楚您是否正确使用 scrollLeft 并且\或对它有正确的期望（即您的 @ 987654328@ 容器应该有水平滚动条；overflow 应该允许滚动条）
@BrettCaswell，这些值按预期工作。尽管将 ref.current.scrollLeft 位置设置为这些值，但它不仅被重新分配。
您对ref 的使用似乎是正确的。我测试了类似的代码。也许变量的名称应该不是ref。
我也试过了，好像没用。像 divRef

标签： css reactjs typescript

【解决方案1】：

您的逻辑在这里有缺陷： ref.current.scrollLeft = scrollX + e.clientX - clientX;。如果您记录该操作的值，您会看到它是一个负数。

根据Element.scrollLeft 上的 MDN 文档：

如果指定为小于 0 的值（对于从右到左的元素大于 0），则 scrollLeft 设置为 0。

这解释了为什么您总是看到它为 0。您可以在 CodeSandbox 中看到它。

希望这能让你摆脱困境！祝你好运！

【讨论】：