打字稿可拖动滑块

Posted 2023-02-22

【中文标题】打字稿可拖动滑块

【英文标题】：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

【参考方案1】：

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

根据Element.scrollLeft 上的 MDN 文档：

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

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

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