質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.19%

横スクロール時の幅がなんらかの原因で取得できない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 137

M.Takeshita

score 22

表題のとおりです。その「なんらか」がわかりません。

わからない理由は、見つけたスクリプトをそのまま使用し、応用するための修正ができないからに他ならず、お力をお貸しください。。

やりたいこと:
ヘッダーを過ぎ、scroll-sliderの位置から横スクロール。全ての要素が終わったらfooterに。

できてないこと:
ヘッダーを過ぎ、scroll-sliderの位置から横スクロール...まではできているのですが、scroll-slideの横幅の取得ができておらず
overflow:hiddenに関わらず、コンテンツの途中で横スクロールが終わってしまいます。

原因と思われる事:
拝借したスクリプトは、scroll-slideというコンテンツが横並びになっており、これらの横幅分、横スクロールできるのかと思うのですが、
こちらで作りたいものはscroll-slideというwrapは基本的に1個か2個で、1個は固定幅なのですが、もう一つは記事なので幅が不明確なのです。

使用した元コードはこちらです。

教えてほしいこと:
scroll-slideの横幅取得はどのようにすれば良いでしょうか?

<section class="scroll-slider">
<article class="scroll-wrapper">
<div class="entry-title-box scroll-slide">
<h1>記事タイトル</h1>
</div>
<div class="entry-content-box scroll-slide">
<p>記事テキストが入ります</p>
<p>記事テキストが入ります</p>
<p>記事テキストが入ります</p>
/// この調子で2000文字くらい
</div>
</article>
</section>
.scroll-slider {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  height: 100vh;
}
.scroll-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  padding:3em 0;
  box-sizing: border-box;
}
.entry-title-box{
  width:300px;
}
.entry-content-box{
  columns: 250px auto;
  column-gap: 3em;
  column-rule-style:solid;
  column-rule-width: 4.5px;
  column-rule-color: $c-line;
  column-fill: auto;
  text-align: justify;
  min-width:800px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<script>
!(function($) {

    'use strict';

    var $slider = $('.scroll-slider'),
        $slides = $('.scroll-slide'),
        $sliderWrapper = $('.scroll-wrapper'),
        $firstSlide = $slides.first();

    var settings = {},
        resizing = false,
        scrollController = null,
        scrollTween = null,
        scrollTimeline = null,
        progress = 0,
        scrollScene = null;

    function scrollSlider(options) {

        // Default
        settings = $.extend({
            slider: '.scroll-slider',
            sliderWrapper: '.scroll-wrapper',
            slides: '.scroll-slide',
            slideWidth: null,
            slideHeight: null,
        }, options);

        // Set dimensions
        setDimensions();

        // On resize
        $(window).on( 'resize', function() {
          clearTimeout(resizing);
          resizing = setTimeout(function() {
            setDimensions();
          }, 250);
        });

    }

    function setDimensions() {

        settings.slideWidth = $firstSlide.width();
        settings.slideHeight = $firstSlide.height();

        console.log(settings.slideWidth);
        console.log(settings.slideHeight);

        // Calculate slider width and height
        settings.sliderWidth = Math.ceil((settings.slideWidth * $slides.length));
        settings.sliderHeight = $firstSlide.outerHeight(true);

        // Set slider width and height
        $sliderWrapper.width(settings.sliderWidth);
        //$sliderWrapper.height(settings.sliderHeight);

        // Set scene
        setScene();

        //resizing = false;
    }

    function setScene() {

      var xDist = -$slides.width() * ( $slides.length - 1 ),
          tlParams = { x: xDist, ease: Power2.easeInOut };

      if (scrollScene != null && scrollTimeline != null) {

          progress = 0;
          scrollScene.progress(progress);

          scrollTimeline = new TimelineMax();
          scrollTimeline.to( $sliderWrapper, 2, tlParams );

          scrollScene.setTween(scrollTimeline);

          scrollScene.refresh();

      } else {
          // Init ScrollMagic controller
          scrollController = new ScrollMagic.Controller();

          //Create Tween
          scrollTimeline = new TimelineMax();
          scrollTimeline.to( $sliderWrapper, 2, tlParams );
          scrollTimeline.progress( progress );

          // Create scene to pin and link animation
          scrollScene = new ScrollMagic.Scene({
              triggerElement: settings.slider,
              triggerHook: "onLeave",
              duration: settings.sliderWidth
          })
          .setPin(settings.slider)
          .setTween(scrollTimeline)
          .addTo(scrollController)
          .on('start', function (event) {
            scrollTimeline.time(0);
          });
      }

    }

  $(document).ready(function() {
    scrollSlider();
  });

})(jQuery);
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る