I'm trying to make a slider bar gallery scroll with the Mouse Teaching in JavaScript but I have an issue when I'm trying to scroll on touching the element the elements is shaking, I would like to know what I'm doing wrong
My Screen Recording: Demo of the Problem
My Code:
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>
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> I found the problem - it is because the mouse moves very fast. I am using CSS property left and adding that e.target.offsetLeft instead of e.offsetX, and inSlidebar.style.left instead of inSlidebar.style.transform
The new CSS looks like this:
div.v {
display: flex;
position: relative;
top: 0;
left: -10px;
transform: translateX(0px);
transition: left 2s;
}