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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1232閲覧

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

M.Takeshita

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/01/21 00:50

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

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

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

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

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

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

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

HTML

1<section class="scroll-slider"> 2<article class="scroll-wrapper"> 3<div class="entry-title-box scroll-slide"> 4<h1>記事タイトル</h1> 5</div> 6<div class="entry-content-box scroll-slide"> 7<p>記事テキストが入ります</p> 8<p>記事テキストが入ります</p> 9<p>記事テキストが入ります</p> 10/// この調子で2000文字くらい 11</div> 12</article> 13</section>

css

1.scroll-slider { 2 position: relative; 3 overflow: hidden; 4 display: block; 5 margin: 0; 6 padding: 0; 7 height: 100vh; 8} 9.scroll-wrapper { 10 position: relative; 11 display: flex; 12 flex-wrap: nowrap; 13 height: 100%; 14 padding:3em 0; 15 box-sizing: border-box; 16} 17.entry-title-box{ 18 width:300px; 19} 20.entry-content-box{ 21 columns: 250px auto; 22 column-gap: 3em; 23 column-rule-style:solid; 24 column-rule-width: 4.5px; 25 column-rule-color: $c-line; 26 column-fill: auto; 27 text-align: justify; 28 min-width:800px; 29 }

js

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script> 5<script> 6!(function($) { 7 8 'use strict'; 9 10 var $slider = $('.scroll-slider'), 11 $slides = $('.scroll-slide'), 12 $sliderWrapper = $('.scroll-wrapper'), 13 $firstSlide = $slides.first(); 14 15 var settings = {}, 16 resizing = false, 17 scrollController = null, 18 scrollTween = null, 19 scrollTimeline = null, 20 progress = 0, 21 scrollScene = null; 22 23 function scrollSlider(options) { 24 25 // Default 26 settings = $.extend({ 27 slider: '.scroll-slider', 28 sliderWrapper: '.scroll-wrapper', 29 slides: '.scroll-slide', 30 slideWidth: null, 31 slideHeight: null, 32 }, options); 33 34 // Set dimensions 35 setDimensions(); 36 37 // On resize 38 $(window).on( 'resize', function() { 39 clearTimeout(resizing); 40 resizing = setTimeout(function() { 41 setDimensions(); 42 }, 250); 43 }); 44 45 } 46 47 function setDimensions() { 48 49 settings.slideWidth = $firstSlide.width(); 50 settings.slideHeight = $firstSlide.height(); 51 52 console.log(settings.slideWidth); 53 console.log(settings.slideHeight); 54 55 // Calculate slider width and height 56 settings.sliderWidth = Math.ceil((settings.slideWidth * $slides.length)); 57 settings.sliderHeight = $firstSlide.outerHeight(true); 58 59 // Set slider width and height 60 $sliderWrapper.width(settings.sliderWidth); 61 //$sliderWrapper.height(settings.sliderHeight); 62 63 // Set scene 64 setScene(); 65 66 //resizing = false; 67 } 68 69 function setScene() { 70 71 var xDist = -$slides.width() * ( $slides.length - 1 ), 72 tlParams = { x: xDist, ease: Power2.easeInOut }; 73 74 if (scrollScene != null && scrollTimeline != null) { 75 76 progress = 0; 77 scrollScene.progress(progress); 78 79 scrollTimeline = new TimelineMax(); 80 scrollTimeline.to( $sliderWrapper, 2, tlParams ); 81 82 scrollScene.setTween(scrollTimeline); 83 84 scrollScene.refresh(); 85 86 } else { 87 // Init ScrollMagic controller 88 scrollController = new ScrollMagic.Controller(); 89 90 //Create Tween 91 scrollTimeline = new TimelineMax(); 92 scrollTimeline.to( $sliderWrapper, 2, tlParams ); 93 scrollTimeline.progress( progress ); 94 95 // Create scene to pin and link animation 96 scrollScene = new ScrollMagic.Scene({ 97 triggerElement: settings.slider, 98 triggerHook: "onLeave", 99 duration: settings.sliderWidth 100 }) 101 .setPin(settings.slider) 102 .setTween(scrollTimeline) 103 .addTo(scrollController) 104 .on('start', function (event) { 105 scrollTimeline.time(0); 106 }); 107 } 108 109 } 110 111 $(document).ready(function() { 112 scrollSlider(); 113 }); 114 115})(jQuery); 116</script>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問