css Question posted in
Some basic documentation can be found here.

Css – scroll method in javascript is not working

scroll method not working but ı can use style.left and get it done. How can i use the scroll method and get the same result ?

let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const wrapper = document.querySelector('.wrapper')
const max = document.querySelectorAll('.slide').length - 1

function sliderFunc() {
  if (counter < max) {
    counter++
    console.log(counter)
    slider.style.left = '-' + 800 * counter + 'px'
    // ` ${-800*counter}px`
  } else {
    counter = 0
    slider.style.left = '-' + 800 * counter + 'px'
  }
}

let timer = setInterval(sliderFunc, 3000)

wrapper.addEventListener('mouseover', () => {
  clearInterval(timer)
  console.log('üzerinde')
})
wrapper.addEventListener('mouseout', () => {
  timer = setInterval(sliderFunc, 3000)
  console.log('durdu')
})

next.addEventListener('click', sliderFunc)

prev.addEventListener('click', () => {
  if (counter >= 0) {
    counter--
    console.log(counter)
    slider.style.left = '-' + 800 * counter + 'px'
  }
})
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #333;
  min-height: 100vh;
  width: 100%;
  font-size: 12px;
  font-family: 'Poppins';
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 800px;
  height: 400px;
  border: 1px solid #777;
  position: relative;
  overflow: hidden;
}

#prev,
#next {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border-radius: 100%;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: calc(50% - 15px);
}

#prev {
  left: 15px;
}

#next {
  right: 15px;
}

.slider {
  width: fit-content;
  display: flex;
  height: 400px;
  position: relative;
  left: 0;
  transition: 0.5s all ease;
}

.slide {
  width: 800px;
  height: 400px;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: bold;
}
<body>
  <div class="wrapper">
    <div id="prev">
      <i class="fa-solid fa-caret-left"></i>
    </div>
    <div class="slider">
      <div class="slide" style="background-image: url(./img1.jpg)">
        SLIDE 1
      </div>
      <div class="slide" style="background-image: url(./img2.jpg)">
        SLIDE 2
      </div>
      <div class="slide" style="background-image: url(./img4.jpg)">
        SLIDE 3
      </div>
      <div class="slide" style="background-image: url(./img5.jpg)">
        SLIDE 4
      </div>
    </div>
    <div id="next">
      <i class="fa-solid fa-caret-right"></i>
    </div>
  </div>
</body>
<script src="https://kit.fontawesome.com/66df44010b.js" crossorigin="anonymous"></script>

My JavaScript code above is working fine. I attempted to achieve the same result using a different approach, namely the scroll method, but it didn’t work, and it also didn’t give any error messages.

This is not working… How should I use the scroll method?

let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const wrapper = document.querySelector('.wrapper')
const max = document.querySelectorAll('.slide').length - 1
let count = 0

console.log(wrapper.offsetWidth) //800
console.log(slider.offsetWidth)  //3200

function sliderFunc() {
  counter++
  slider.scroll({
    top: 0,
    left: -(wrapper.offsetWidth * counter),
    // left: wrapper.offsetWidth * counter 
    // not working either
    behavior: 'smooth',
  })
}
next.addEventListener('click', sliderFunc)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #333;
  min-height: 100vh;
  width: 100%;
  font-size: 12px;
  font-family: 'Poppins';
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 800px;
  height: 400px;
  border: 1px solid #777;
  position: relative;
  overflow: hidden;
}

#prev,
#next {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border-radius: 100%;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: calc(50% - 15px);
}

#prev {
  left: 15px;
}

#next {
  right: 15px;
}

.slider {
  width: fit-content;
  display: flex;
  height: 400px;
  position: relative;
  left: 0;
  transition: 0.5s all ease;
}

.slide {
  width: 800px;
  height: 400px;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: bold;
}
<body>
  <div class="wrapper">
    <div id="prev">
      <i class="fa-solid fa-caret-left"></i>
    </div>
    <div class="slider">
      <div class="slide" style="background-image: url(./img1.jpg)">
        SLIDE 1
      </div>
      <div class="slide" style="background-image: url(./img2.jpg)">
        SLIDE 2
      </div>
      <div class="slide" style="background-image: url(./img4.jpg)">
        SLIDE 3
      </div>
      <div class="slide" style="background-image: url(./img5.jpg)">
        SLIDE 4
      </div>
    </div>
    <div id="next">
      <i class="fa-solid fa-caret-right"></i>
    </div>
  </div>
</body>
<script src="https://kit.fontawesome.com/66df44010b.js" crossorigin="anonymous"></script>
Tags:

2

Answers


  1. 0

    I see that you have added negative value for ‘left’ in scroll method. Seems that is preventing it from scrolling. You can add a positive value and then increase or decrease the counter as needed.

    Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

    Login or Signup to reply.
  2. 0

    I simplified your CSS code a bit. The main problem lied in having your .wrapper hiding overflow elements. I moved overflow: hidden to .slider instead.

    Also, I refactored the sliderFunc() code slightly and moved the counter modification bit to a new method, in preparation for when you want to implement the left scrolling, which will use the new numberOfSlides variable and an if statement.

    Other than that, I used the modulus operator (%) to make the slider loop around without having to use an if statement.

    let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const slideWidth = document.querySelector('.slide').offsetWidth;
const numberOfSlides = document.querySelectorAll('.slide').length;

function sliderFunc() {
  const newPosition = slideWidth * (counter % numberOfSlides);

  slider.scroll({left: newPosition, top: 0, behavior: 'smooth'});
}

function scrollRight() {
  counter++;
  sliderFunc();
}

next.addEventListener('click', scrollRight)
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #333;
  min-height: 100vh;
  font-family: 'Poppins';
}

.wrapper {
  position: relative;
}

#prev,
#next {
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border-radius: 100%;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
}

#prev {
  left: 15px;
}

#next {
  right: 15px;
}

.slider {
  display: flex;
  height: 400px;
  overflow: hidden;
}

.slide {
  min-width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
}
    <body>
  <div class="wrapper">
    <div id="prev">
      <i class="fa-solid fa-caret-left"></i>
    </div>
    <div class="slider">
      <div class="slide" style="background-image: url(./img1.jpg)">
        SLIDE 1
      </div>
      <div class="slide" style="background-image: url(./img2.jpg)">
        SLIDE 2
      </div>
      <div class="slide" style="background-image: url(./img4.jpg)">
        SLIDE 3
      </div>
      <div class="slide" style="background-image: url(./img5.jpg)">
        SLIDE 4
      </div>
    </div>
    <div id="next">
      <i class="fa-solid fa-caret-right"></i>
    </div>
  </div>
</body>
<script src="https://kit.fontawesome.com/66df44010b.js" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search