メインビューの画像を画像内で上下にSplit（分割した状態）でスクロールさせたい。

実現したいこと

発生している問題・エラーメッセージ

今はスクロールしてSplit（分割した状態）からメインビューの画像の外側にでてスクロールしてしましいます。これを画像内に収まった状態でスクロールしてSplit（分割した状態）させたいです。

画像内で上下にスクロールしてほしいのに完全に外側にはみ出でスクロールされてしまいます。

https://i.gyazo.com/4507cc6557f0edb96f28bd9c775aff55.mp4

もともとは下記のものを参考にいたしました↓↓↓↓↓
https://codepen.io/supah/pen/zZaPeE

HTML
1<div class="split-slideshow">
2  <div class="slideshow">
3    <div class="slider">
4      <div class="item">
5        <img src="images/gallery.jpg" />
6      </div>
7      <div class="item">
8        <img src="images/top01.jpg" />
9      </div>
10      <div class="item">
11        <img src="images/gallery.jpg" />
12      </div>
13      <div class="item">
14        <img src="images/top01.jpg" />
15      </div>
16    </div>
17  </div>
18</div>

CSS
1.slideshow {
2  position: absolute;
3  z-index: 1;
4  top: 0;
5  left: 0;
6  width: 100vw;
7  height: 100vh;
8  overflow: hidden;
9}
10.slideshow .slider {
11  width: 100vw;
12  height: 100vw;
13  z-index: 2;
14}
15.slideshow .slider * {
16  outline: none;
17}
18.slideshow .slider .item {
19  height: 100vh;
20  width: 100vw;
21  position: relative;
22  overflow: hidden;
23  border: none;
24}
25.slideshow .slider .item .text {
26  display: none;
27}
28.slideshow .slider .item img {
29  position: absolute;
30  top: 50%;
31  left: 50%;
32  transform: translate(-50%, -50%);
33  max-width: 650px;
34}
35.slideshow .slick-dots {
36  position: fixed;
37  z-index: 100;
38  width: 40px;
39  height: auto;
40  bottom: auto;
41  top: 50%;
42  right: 0;
43  transform: translateY(-50%);
44  left: auto;
45  color: #fff;
46  display: block;
47}
48.slideshow .slick-dots li {
49  display: block;
50  width: 100%;
51  height: auto;
52}
53.slideshow .slick-dots li button {
54  position: relative;
55  width: 20px;
56  height: 15px;
57  text-align: center;
58}
59.slideshow .slick-dots li button:before {
60  content: "";
61  background: #fff;
62  color: #fff;
63  height: 2px;
64  width: 20px;
65  border-radius: 0;
66  position: absolute;
67  top: 50%;
68  right: 0;
69  left: auto;
70  transform: translateY(-50%);
71  transition: all 0.3s ease-in-out;
72  opacity: 0.6;
73}
74.slideshow .slick-dots li.slick-active button:before {
75  width: 40px;
76  opacity: 1;
77}
78.slideshow.slideshow-right {
79  left: 0;
80  z-index: 1;
81  width: 50vw;
82  pointer-events: none;
83}
84.slideshow.slideshow-right .slider {
85  left: 0;
86  position: absolute;
87}
88
89.slideshow-text {
90  position: absolute;
91  top: 50%;
92  left: 50%;
93  transform: translate(-50%, -50%);
94  z-index: 100;
95  font-size: 80px;
96  width: 100vw;
97  text-align: center;
98  color: #fff;
99  font-family: "Roboto Condensed", sans-serif;
100  font-weight: 100;
101  pointer-events: none;
102  text-transform: uppercase;
103  letter-spacing: 20px;
104  line-height: 0.8;
105}

javascript
1var $slider = $('.slideshow .slider'),
2  maxItems = $('.item', $slider).length,
3  dragging = false,
4  tracking,
5  rightTracking;
6
7$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));
8
9rightItems = $('.item', $sliderRight).toArray();
10reverseItems = rightItems.reverse();
11$('.slider', $sliderRight).html('');
12for (i = 0; i < maxItems; i++) {
13  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
14}
15
16$slider.addClass('slideshow-left');
17$('.slideshow-left').slick({
18  vertical: true,
19  verticalSwiping: true,
20  arrows: false,
21  infinite: true,
22  dots: true,
23  speed: 1000,
24  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
25}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
26
27  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
28    $('.slideshow-right .slider').slick('slickGoTo', -1);
29    $('.slideshow-text').slick('slickGoTo', maxItems);
30  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
31    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
32    $('.slideshow-text').slick('slickGoTo', -1);
33  } else {
34    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
35    $('.slideshow-text').slick('slickGoTo', nextSlide);
36  }
37}).on("mousewheel", function(event) {
38  event.preventDefault();
39  if (event.deltaX > 0 || event.deltaY < 0) {
40    $(this).slick('slickNext');
41  } else if (event.deltaX < 0 || event.deltaY > 0) {
42    $(this).slick('slickPrev');
43  };
44}).on('mousedown touchstart', function(){
45  dragging = true;
46  tracking = $('.slick-track', $slider).css('transform');
47  tracking = parseInt(tracking.split(',')[5]);
48  rightTracking = $('.slideshow-right .slick-track').css('transform');
49  rightTracking = parseInt(rightTracking.split(',')[5]);
50}).on('mousemove touchmove', function(){
51  if (dragging) {
52    newTracking = $('.slideshow-left .slick-track').css('transform');
53    newTracking = parseInt(newTracking.split(',')[5]);
54    diffTracking = newTracking - tracking;
55    $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
56  }
57}).on('mouseleave touchend mouseup', function(){
58  dragging = false;
59});
60
61$('.slideshow-right .slider').slick({
62  swipe: false,
63  vertical: true,
64  arrows: false,
65  infinite: true,
66  speed: 950,
67  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
68  initialSlide: maxItems - 1
69});
70$('.slideshow-text').slick({
71  swipe: false,
72  vertical: true,
73  arrows: false,
74  infinite: true,
75  speed: 900,
76  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
77});

positionなどで位置は調整できるんですが、画像からはみ出してスクロールする動きを止めれません。宜しくお願いします。

yambejp

2023/03/14 07:38

どこか動作が確認できるサイトにアップできませんか？あと想定する動作を図示できませんか？

nori7777

2023/03/14 13:36

ありがとうございます。キャプチャーでわかりますでしょうか。画像内で上下にスクロールしてほしいのに完全に外側にはみ出でスクロールされてしまいます。 https://i.gyazo.com/4507cc6557f0edb96f28bd9c775aff55.mp4 もともとは下記のものを参考にいたしました↓↓↓↓↓ https://codepen.io/supah/pen/zZaPeE