What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

Question

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target.

const slide = document.querySelector(".slides")

slide.addEventListener('scroll', function(e) {
  const slide2 = document.querySelector("#slide-2")
  console.log(slide2.offsetLeft)
})

<div class="slider">
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>
  <div class="slides">
    <div id="slide-1">1</div>
    <div id="slide-2">2</div>
    <div id="slide-3">3</div>
    <div id="slide-4">4</div>
    <div id="slide-5">5</div>
  </div>
</div>

I aim to determine if the user is on the right or left side of the div in order to activate dots for my slider. My approach is to stick with native JavaScript for this purpose :)

Check out my Codepen example https://codepen.io/lpllplp222/pen/BaRvwKm

javascript html css

Answer 1

Answer №1

In order to achieve the same functionality, I utilized the power of jQuery.

The position() function within jQuery allowed me to determine the current position of an element from its top and left. By utilizing the left value, I was able to calculate the active element and assign an active class to the corresponding dot.

const slide = document.querySelector(".slides")

$('#slider-dots a').on('click', function(event) {
  event.stopPropagation();
})

slide.addEventListener('scroll', function(e) {
  var scrollLeft = $('#slides-wrapper').scrollLeft();
  var currIndex = -1;
  $('#slider-dots a').removeClass('active');
  for(var i = 0; i<$('#slides-wrapper div').length; i++) {
    if($($('#slides-wrapper div')[i]).position().left >= 0 && currIndex === -1) {
      currIndex = i;
    }
  }
  $($('#slider-dots a')[currIndex]).addClass('active');
})

* {
  box-sizing: border-box;
}

.slider {
  width: 400px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;

  overflow-x: auto;
  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#slider-dots a.active {
  color: violet;
  background-color: #000;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 300px;
  height: 200px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*     transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #74abe2, #5563de);
  font-family: "Ropa Sans", sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" id='slider-dots'>
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div id='slides-wrapper' class="slides">
    <div id="slide-1">
      1
    </div>
    <div id="slide-2">
      2
    </div>
    <div id="slide-3">
      3
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>

Answer 2

In order to achieve the same functionality, I utilized the power of jQuery.

The position() function within jQuery allowed me to determine the current position of an element from its top and left. By utilizing the left value, I was able to calculate the active element and assign an active class to the corresponding dot.

const slide = document.querySelector(".slides")

$('#slider-dots a').on('click', function(event) {
  event.stopPropagation();
})

slide.addEventListener('scroll', function(e) {
  var scrollLeft = $('#slides-wrapper').scrollLeft();
  var currIndex = -1;
  $('#slider-dots a').removeClass('active');
  for(var i = 0; i<$('#slides-wrapper div').length; i++) {
    if($($('#slides-wrapper div')[i]).position().left >= 0 && currIndex === -1) {
      currIndex = i;
    }
  }
  $($('#slider-dots a')[currIndex]).addClass('active');
})

* {
  box-sizing: border-box;
}

.slider {
  width: 400px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;

  overflow-x: auto;
  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#slider-dots a.active {
  color: violet;
  background-color: #000;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 300px;
  height: 200px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*     transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #74abe2, #5563de);
  font-family: "Ropa Sans", sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" id='slider-dots'>
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div id='slides-wrapper' class="slides">
    <div id="slide-1">
      1
    </div>
    <div id="slide-2">
      2
    </div>
    <div id="slide-3">
      3
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

Answer №1

Similar questions

Flexbox: changing the order and arranging columns in a vertical stack

Mastering the art of horizontal alignment in forms

Get tabular information in xlsx format by utilizing the xlsx npm package for download

`Exploring the magic of CSS image overlay feature`

What are the steps for displaying multiple input fields using the onchange method?

Jquery animate - callback is triggered before animation finishes running

The data being transmitted by the server is not being received accurately

Issue encountered when compiling Vue 3 with TypeScript and Webpack Encore: Vue Router's $route is missing

Easily done! Using JavaScript to generate a blinking cursor on a table

As the number of lines increases by x%, CSS gradients gradually fade away during the generation process

Retrieve every HTML element that is currently visible on the screen as a result

"Change opacity smoothly with the FadeToggle feature for a

sending data from an AngularJS application to an MVC controller in JSON format containing multiple arrays

An issue has been discovered where IE8 is unable to print an image within the :before pseudo

Fading Out with JQuery

What is the best approach in Ruby for managing an unordered list with split columns and counting each

Extracting data from XML using my custom script

Can integers be used as keys in a JavaScript object's storage?

PHP MySQL - Automatically trigger email notification upon insertion of a new record

Wait for the definition of a variable before returning in React Native