how to scroll an element using javascript?

Question

could you please tell me how to scroll an element using javascript? Actually, I have created a demo application. I can be left when "left is positive" but not able to scroll when the left is negative.

I created two cases. First cases working fine. When I click on the button it scrolls to 100 px. But in the second case, I am not able to scroll negative why? here is my code

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)

https://jsbin.com/mahohoquge/edit?html,js,output

case 1: is working fine

**

1. 2. case 2: not working fine

**

any idea? how to scroll

<!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>

Could you please elaborate a little more about what is the effect you want to achieve? — Mirous
– Mirous, Commented Mar 3, 2021 at 11:13
if you see first example next slide display in button click.can we do the same thing in second example — user944513
– user944513, Commented Mar 3, 2021 at 11:16
In otherwords blue is coming from right in example one.I want it should come from left in second example — user944513
– user944513, Commented Mar 3, 2021 at 11:17
I am not sure but the jquery double scroll is may be useful for you. [jqueryscript.net/other/… — Vivek Tarsariya
– Vivek Tarsariya, Commented Mar 3, 2021 at 11:38

Abdel Kader Glt · Accepted Answer · 2021-03-03 12:41:29Z

2

if you're trying to achieve the carousel effect, it would be much effective to use the transform: translate() function instead of using the scroll. https://jsbin.com/kiditahado/edit?html,css,js,output this edited snippet from your original one shows how you could do it.

let start = 0;
function handler(step){
 const p = document.querySelectorAll(".p div");
  start+=step
  p.forEach(el=>{

  el.style.transform =`translate(${start}px,0)`

  })

}

answered Mar 3, 2021 at 12:41

Abdel Kader Glt

662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mirous · Accepted Answer · 2021-03-03 11:29:11Z

0

The underlying problem is that u can't scoll into negative values. The only solution witch comes to my mind is to reverse the blocks and scroll from the right side.

So css becomes:

.p2{
  position:relative;
  width:100px;
  height:100px;
  overflow:hidden;
  left:50%;
}
.b2{
  width:100px;
  height:100px;
  position:absolute
}
.r2 {
  background-color:red;
  left:200px;
}

.bl2 {
  background-color:blue;
  left:100px;
}

.g2 {
  background-color:green;
  left:0px;
}

And JS becomes:

function handler2(){  
  document.querySelector(".p2").scroll({
    left:100,
    behavior: 'smooth'
  })     
}

// start from the other side
document.querySelector(".p2").scroll({left:200});

document.getElementById("button2").addEventListener("click", handler2, false)

answered Mar 3, 2021 at 11:29

Mirous

4837 silver badges18 bronze badges

4 Comments

user944513 Over a year ago

any better way ..! ?

Mirous Over a year ago

Sure, skip javascript and use CSS animations instead.

user944513 Over a year ago

can you also share that example also

Mirous Over a year ago

Well, it still really depends on what is your use case. Do you want it for some button animation, banner animation? ...or do you want to move whole page content with it?

Collectives™ on Stack Overflow

how to scroll an element using javascript?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related