JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="scrollbox">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>5</li>
    <li>6</li>
    <li>8</li>
  </ul>
</div>

CSS

.scrollbox {
  position: relative;
  white-space: nowrap;
  font-size: 0;
  overflow: hidden;
  overflow-x: auto;
  width: 400px;
  font-size: 0;
}
.scrollbox li {
  display: inline-block;
  vertical-align: top;
  width: 500px;
  height: 200px;
  font-size: 56px;
  text-align: center;
  line-height: 200px;
  transition: transform 1s ease-in;
}
.on {
  background: red;
  transform: translateY(-10px)
}

JavaScript

var scrollbox = $('.scrollbox');
var lis = document.querySelectorAll('li');

lis.forEach(function(item){
    var pos = $(item).position().left;
    //console.log(pos)
    $(".scrollbox").on("scroll", function (e) {
    	var scrollpos = $('.scrollbox').scrollLeft();
      console.log(scrollpos)
    	if(pos <= scrollpos) {
      	$('li').removeClass('on')
      	$(item).addClass('on');
      }
    })
    /* if(pos === horizontal) {
      $(item).addClass('on');
    } */
})



/* $(".scrollbox").on("scroll", function (e) {
  horizontal = e.currentTarget.scrollLeft;
  console.log($(".scrollbox").scrollLeft())
  vertical = e.currentTarget.scrollTop;
  lis.forEach(function(item){
    var pos = $(item).position().left;
    console.log(pos + " " + horizontal)
    if(pos === horizontal) {
      $(item).addClass('on');
    }
  })
}); */
/* lis.each(function(item){
  console.log(item.position().left)
}) */



/* scrollbox.addEventListener('click', function(){
  console.log('test')
}) */


/* var list = $('.scrollbox ul li:nth-child(2)').position().left;
  console.log(list) */