Question 214720 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to add smooth scroll effect to div by css or javascript?

Creating a scrollable div with left and right scroll on click event. I wanted to make the scroll effect smooth with CSS transition or any other way, please help

<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><</span>
<span class="btns horizon-next" id="right-button" >></span>
</div>

//JS
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');

rightBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  conent.scrollLeft += 150;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  conent.scrollLeft -= 150;
  event.preventDefault();
});


// CSS
.sliderBlock {
  display: flex;
  height: 200px;
  border: solid 1px red;
  width: 800px;
  overflow: hidden;
  overflow-x: auto;

  transition: 2s all ease;
}

.sliderBlock>div {
  width: calc(100% / 5.5);
  margin-right: 2.2%;
  border: solid 1px black;
  min-width: 143px;
}

.sliderBlock>div:nth-child(5n) {}

.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

https://jsfiddle.net/anoopsuda/g0fk52ry/31/

Tags:

2

Answers


  1. 0

    For Smooth Scroll you need to use Element.scrollTo() method instead of scrollLeft property. with scrollTo you can pass the behavior option, setting it to smooth.

    Learn more about Element.scrollTo()

    Demo:

    const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');

rightBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  // Change 1
  conent.scrollTo({
    top: 0,
    left: conent.scrollLeft + 150,
    behavior: "smooth",
  });

  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  // Change 2
  conent.scrollTo({
    top: 0,
    left: conent.scrollLeft - 150,
    behavior: "smooth",
  });

  event.preventDefault();
});
    .sliderBlock {
  display: flex;
  height: 200px;
  border: solid 1px red;
  width: 800px;
  overflow: hidden;
  overflow-x: auto;
  transition: 2s all ease;
}

.sliderBlock>div {
  width: calc(100% / 5.5);
  margin-right: 2.2%;
  border: solid 1px black;
  min-width: 143px;
}

.sliderBlock>div:nth-child(5n) {}

.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}
    <div class="cardsliderblock">
  <div class="sliderBlock" id="Slidercontent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>
  <span class="btns horizon-prev" id="left-button"><</span>
  <span class="btns horizon-next" id="right-button">></span>
</div>
    Login or Signup to reply.
  2. 0

    You can use

    *{
    scroll-behavior: smooth;
}

    to make this smooth

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search