Css Typescript可拖动滑块

我需要帮助在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;

---

你的逻辑在这里有缺陷：

ref.current.scrollLeft=scrollX+e.clientX-clientX。如果您记录该操作的值，您将看到它是一个负数

根据MDN文档，关于：

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

这就解释了为什么它总是显示为0。你可以在一张照片中看到这一点

希望你能摆脱困境！祝你好运
 嗯。。。在
scrollX+e.clientX-clientX
中。。
scrollX
和
clientX
的值是否不同？相反，
const{clientX，scrollX}=state
是否像您在这里期望的那样工作。。继续，用你的相关css更新你的问题。。由于不清楚您是否正确使用了
scrollLeft
，或者对它的期望是否正确（即您的
content
容器应该有一个水平滚动条；
overflow
应该允许滚动条）@BrettCaswell，这些值按照预期工作。ref.current.scrollLeft位置不仅被重新分配，尽管将其设置为这些值。您对
ref
的使用似乎是正确的。。我测试了类似的代码。。也许变量的名称应该是其他的，然后
ref
。我也试过了，似乎不起作用。类似divRef的东西
.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