Would you be able to guide me on scrolling an element using JavaScript? I have developed a demo application where the scroll works when "left is positive" but not when it's negative.
I've set up two cases, with the first one working perfectly. Clicking the button scrolls to 100px. However, in the second case, I'm facing issues with scrolling in the negative direction. Here's the code snippet:
function handler(){
document.querySelector(".p").scroll({
left: 100,
behavior: 'smooth'
});
}
document.getElementById("button").addEventListener("click", handler, false);
function handler2(){
document.querySelector(".p2").scroll({
left: -100,
behavior: 'smooth'
});
}
document.getElementById("button2").addEventListener("click", handler2, false);
- Case 1: Scrolls properly
*
1. 2. Case 2: Facing issues with scrolling
*
Any insights on how to tackle this scrolling problem?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Case 1:
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button"> move</button>
<hr/>
Case 2:
<div class="p2">
<div class="b r2">1</div>
<div class="b g2">1</div>
<div class="b bl2">1</div>
</div>
<button id="button2"> move left</button>
</body>
</html>