试图用JS制作Slider条，滚动时元素会抖动

Question

我正在尝试使用JavaScript中的鼠标教学来滚动滑块库但是我有一个问题，当我试图滚动触摸元素时，元素正在摇晃，我想知道我做错了什么

我的屏幕录制：问题演示

我的代码：

        let mouseUpStatus = false;
        let mouseMoveStatus = false;
        let mouseEnterStatus = false;
        let pressed = false;
        let slidebar = document.querySelector(".box");
        let inSlidebar = document.querySelector(".v");
        let c = document.querySelector(".c");
        let widthC = c.offsetWidth;
        let newX = 0;
      
        
        slidebar.addEventListener('mousemove', (e) =>{
            if(pressed){
                newX = widthC+e.offsetX;
                inSlidebar.style.transform = "translateX("+newX+"px)";  
            }
        });
        
        slidebar.addEventListener('mouseup', (e) =>{
            pressed = false;
        });
        slidebar.addEventListener('mousedown', (e) =>{
            pressed = true; 
        });

            div.box{
                width: 480px;
                overflow: hidden;
            }
            div.v{
                display: flex;
                transform: translateX(0px);
            }
            ::-webkit-scrollbar {
                width: 0;  /* Remove scrollbar space */
                background: transparent;  /* Optional: just make scrollbar invisible */
            }
                div.c {
                width: 24%;
                height: 60px;
                background-color: skyblue;
                flex-shrink: 0;
                margin-right: 1%;
            }

                <div class="box">
                    <div class="v">
                        <div  class="c"></div>
                        <div class="c"></div>
                        <div class="c"></div>
                        <div class="c"></div>
                        <div class="c"></div>
                        <div  class="c"></div>
                        <div class="c">7</div>
                    </div> 
                </div>
       

非常感谢。

Answer 1

 let slidebar = document.querySelector(".box");
            let inSlidebar = document.querySelector(".v");
            let c = document.querySelector(".c");
            let widthC = c.offsetWidth;
            let slidevalue = 0;

            function slideNext() {    
                 slidevalue += widthC;
                 document.getElementById("vt").style.transform = "translateX(-"+ slidevalue + "px)";
                
            }
            
            function slidePrev() {    
                 slidevalue -= widthC;
                 document.getElementById("vt").style.transform = "translateX(-"+ slidevalue + "px)";            
            }

div.box{
                width: 480px;
                overflow: hidden;
            }
            div.v{
                display: flex;
                transform: translateX(0px);
            }
            ::-webkit-scrollbar {
                width: 0;  /* Remove scrollbar space */
                background: transparent;  /* Optional: just make scrollbar invisible */
            }
                div.c {
                width: 24%;
                height: 60px;
                background-color: skyblue;
                flex-shrink: 0;
                margin-right: 1%;
            }

<table>
            <tr>
                <td><button id="prev" onclick="slidePrev()">left</button></td>
                <td>
                <div class="box" >         
                    <div class="v" id="vt">
                        <div  class="c" >1</div>
                        <div class="c"   >2</div>
                        <div class="c"   >3</div>
                        <div class="c"   >4</div>
                        <div class="c" >5</div>
                        <div  class="c"  >6</div>
                        <div class="c"  >7</div>
                    </div> 
                    </td>
                    <td><button id="next" onclick="slideNext()">right</button></td>
                </div>
            </tr>
        </table> 

Answer 2

我发现了问题——这是因为鼠标移动得很快。我使用CSS属性left，并添加e.target.offsetLeft而不是e.offsetX，以及inSlidebar.style.left而不是inSlidebar.style.transform

新的CSS如下所示：

div.v {
  display: flex;
  position: relative;
  top: 0;
  left: -10px;
  transform: translateX(0px);
  transition: left 2s;
}