Обновление позиции скрола

Question

Всем привет! Решил сделать смартфон на сайте по которому можно скролить, слайдить и благодаря этому смотреть на мои красивые и не очень работы.

Логика простая, влепил внутрь слайдер в который закидываю длинные картинки с скрином сайтов и добавил скролл. Но проблема вот в чем: когда перелистываешь слайд позиция скрола остается на том же месте.

Вот я долистал до низа картинки, перелистываю и следующий сайт начинается снизу! Иными словами хочу сделать что бы каждый слайд при перелистывании начинался с верху, и вот не могу додуплить как это сделать. Думал как то присобачить это через if к классу slide-active, но что то не сработало(( Буду благодарен за помощь и идеи.

По требованию добавил код, использовал стороннюю библиотеку https://kenwheeler.github.io/slick/, настройки для нее которые я использовал:

<script type="text/javascript">

      $('.sl').slick({
        dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  accessibility: false,
  arrows: false,
  dots: false
      });
      // $('.sl').console.log();
    </script>

P.S.нужно нажать на круглую кнопку на телефоне, тогда он запустится))

/////////////////////MOBILE////////////////////


var head_mob1 = document.querySelector('.content-3 h4')
var head_mob2 = document.querySelector('.content-3 h4:nth-child(2)')

function screenOn() {
  var img = document.querySelector('.sl');
  var slide = document.querySelector('.sl img');
  var heading = document.querySelector('#heading_mob');

  img.classList.toggle('active');

  head_mob1.style.opacity = ('0');
  head_mob2.classList.add('active');

 

  

};
///////////////////////////////////////////////

/*////////////////////Mobile///////////////////*/

.sl {
  /*margin-top: 30px;*/
  width: 270px;
  height: 480px;
  opacity: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  /*overflow: hidden;*/
  overflow: hidden;
  /*overflow-y: none; */
  z-index: 100;
}

.sl::-webkit-scrollbar {
  width: 0px;
}

.mobile {
  position: absolute;
  width: 270px;
  height: 480px;
  background: #020c17;
  top: 0px;
  left: 0px;
  margin-top: 50px;
}

.content-2 h3 {
  font-family: 'Russo One', sans-serif;
  /*width: 700px;*/
  text-align: center;
  font-size: 2em;
  margin-top: 75px;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 5px 15px rgba(0, 0, 0, .2);
  transition-delay: 1s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
}

.top {
  position: absolute;
  top: -50px;
  width: 100%;
  height: 50px;
  background: white;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background: #7F7F7F;
}

.top:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #ccc;
  border: 2px solid #aaa;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #999;
}

.top:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 3px;
  background: #333;
  border: 2px solid #aaa;
  border-radius: 3px;
}

.bottom {
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 50px;
  background: white;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: #7F7F7F;
}

.bottom:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid #999;
  cursor: pointer;
  border-radius: 50px;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen img {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1000;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  /*margin-top: 100px;*/
}

.active {
  overflow: auto;
  opacity: 1 !important;
}
.screen:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .04);
  z-index: 1;
  transform: skewX(-5deg);
}


/*/////////////////////////////////////////////*/

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="mobile">
  <div class="top"></div>
  <div class="bottom" onclick="screenOn()"></div>
  <div class="screen">
    <div class="sl">
      <img src="https://i.ibb.co/0MWN0gc/facewear-landing.jpg" alt="">
      <img src="https://i.ibb.co/0MWN0gc/facewear-landing.jpg" alt="">
      <img src="https://i.ibb.co/0MWN0gc/facewear-landing.jpg" alt="" id="sayt">
    </div>

  </div>
</div>


<script>
$('.sl').slick({
        dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  accessibility: false,
  arrows: false,
  dots: false
      });
      // $('.sl').console.log();
</script>

БЛОГ НА HUSL

Обновление позиции скрола

Ответы (0 шт):