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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1116閲覧

アクティブに合わせたスクロール連動

hati3693

総合スコア24

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/13 07:42

編集2020/07/13 08:32

gallerifficを使ってサムネイル付きギャラリーを作成していますが
メイン画像の矢印で次の画像に移っていくとサムネがスクロール連動していないのでアクティブなサムネが隠れてしまいます
アクティブになったサムネに合わせて自動でスクロールするのは可能でしょうか
検索するとスクロールに合わせて〇〇~というのしか出てきませんでした
イメージ説明

html

1<div class="detail_img_inner"> 2 <div id="gallery" class="content"> 3 <div id="nav" class="controls"></div> 4 <div class="slideshow-container"> 5 <div id="loading" class="loader"></div> 6 <div id="slideshow" class="slideshow"></div> 7 </div> 8 </div> 9 <div id="thumbs" class="navigation"> 10 <ul class="thumbs noscript scrollbar scrollbar-primary"> 11 <li> 12 <a class="thumb" href="img/1.jpg"><img src="img/1.jpg" alt="" />1</a> 13 </li> 14 <li> 15 <a class="thumb" href="img/2.jpg"><img src="img/2.jpg" alt="" />2</a> 16 </li> 17 <li> 18 <a class="thumb" href="img/3.jpg"><img src="img/3.jpg" alt="" />3</a> 19 </li> 20 </ul> 21 </div> 22 <div style="clear: both;"></div> 23</div>

css

1.detail_img_inner { 2 display: -webkit-box; 3 display: -ms-flexbox; 4 display: flex; 5 -webkit-box-orient: horizontal; 6 -webkit-box-direction: reverse; 7 -ms-flex-flow: row-reverse; 8 flex-flow: row-reverse; 9 -webkit-box-pack: center; 10 -ms-flex-pack: center; 11 justify-content: center; 12} 13 14#gallery.content { 15 display: none; 16 float: right; 17 width: 550px; 18 width: 60%; 19 height: auto; 20 display: block; 21 float: none; 22 position: relative; 23} 24 25div.slideshow-container { 26 position: relative; 27 clear: both; 28 height: auto; 29} 30 31div.slideshow img { 32 vertical-align: middle; 33 border: none; 34 width: auto; 35} 36 37#loading.loader { 38 position: absolute; 39 top: 0; 40 left: 0; 41 background-image: url(loader.gif); 42 background-repeat: no-repeat; 43 background-position: center; 44 width: 100%; 45 height: auto; 46} 47 48ul.thumbs img { 49 border: none; 50 display: block; 51 margin: 0 auto 2px auto; 52} 53 54div.nav-controls { 55 float: none; 56} 57 58div.slideshow a.advance-link { 59 display: block; 60 width: 550px; 61 height: auto; 62 text-align: center; 63 line-height: normal; 64 width: auto; 65} 66 67#thumbs.navigation { 68 float: none; 69 width: 38%; 70 margin-right: .5%; 71 background: #f7f3ef; 72 position: relative; 73 text-align: center; 74 padding: 1%; 75 overflow: hidden; 76} 77 78ul.thumbs li.selected a.thumb { 79 background: #ffffff; 80 -webkit-box-shadow: 0 0 0 3px #f3cd64 inset; 81 box-shadow: 0 0 0 3px #f3cd64 inset; 82 border: 1px solid #f3cd64; 83} 84 85ul.thumbs { 86 clear: both; 87 width: 100%; 88 display: -webkit-box; 89 display: -ms-flexbox; 90 display: flex; 91 -webkit-box-orient: horizontal; 92 -webkit-box-direction: normal; 93 -ms-flex-flow: row wrap; 94 flex-flow: row wrap; 95 -webkit-box-pack: start; 96 -ms-flex-pack: start; 97 justify-content: flex-start; 98 position: relative; 99 height: 100%; 100 overflow-y: scroll; 101} 102 103.scrollbar-primary::-webkit-scrollbar { 104 width: 12px; 105 background-color: #fff; 106 border-radius: 5px; 107} 108 109.scrollbar-primary::-webkit-scrollbar-thumb { 110 border-radius: 10px; 111 background-color: #f3cd64; 112} 113 114ul.thumbs li { 115 float: left; 116 padding: 0; 117 margin: 4px 3px 4px 3px; 118 list-style: none; 119 width: calc(34% - 6px - 1%); 120} 121 122div.navigation div.top, div.navigation div.bottom { 123 height: 25px; 124 display: -webkit-box; 125 display: -ms-flexbox; 126 display: flex; 127 margin: 25px 0 12px 0; 128} 129 130div.pagination a, div.pagination span.current, div.pagination span.ellipsis { 131 display: block; 132 margin-right: 2px; 133 padding: 4px 7px 2px 7px; 134 border: 1px solid #ccc; 135 height: 31px; 136 display: -webkit-box; 137 display: -ms-flexbox; 138 display: flex; 139 -webkit-box-align: center; 140 -ms-flex-align: center; 141 align-items: center; 142 float: none; 143} 144 145.pagination_wrap { 146 display: -webkit-box; 147 display: -ms-flexbox; 148 display: flex; 149 -webkit-box-pack: center; 150 -ms-flex-pack: center; 151 justify-content: center; 152 height: 50px; 153} 154 155div.controls { 156 margin-top: 0; 157 height: 0; 158} 159 160.nav-controls a:nth-child(1) { 161 position: absolute; 162 top: 50%; 163 left: 2%; 164 width: 60px; 165 background: #a9927b; 166 height: 60px; 167 z-index: 2; 168 -webkit-transform: translateY(-50%); 169 transform: translateY(-50%); 170 border-radius: 1em; 171 -webkit-transition: .5s; 172 transition: .5s; 173 opacity: .8; 174} 175 176.nav-controls a:nth-child(1)::before { 177 content: ""; 178 width: 100%; 179 height: 100%; 180 display: block; 181 top: 0; 182 left: 0; 183 background-image: url(left.svg); 184 background-repeat: no-repeat; 185 -webkit-transform: rotate(180deg); 186 transform: rotate(180deg); 187 position: absolute; 188 background-size: 45%; 189 background-position: center,center; 190} 191 192.nav-controls a:nth-child(2) { 193 position: absolute; 194 top: 50%; 195 right: 2%; 196 width: 60px; 197 background: #a9927b; 198 height: 60px; 199 z-index: 2; 200 -webkit-transform: translateY(-50%); 201 transform: translateY(-50%); 202 border-radius: 1em; 203 -webkit-transition: .5s; 204 transition: .5s; 205 opacity: .8; 206} 207 208.nav-controls a:nth-child(2)::before { 209 content: ""; 210 width: 100%; 211 height: 100%; 212 display: block; 213 top: 0; 214 left: 0; 215 background-image: url(left.svg); 216 background-repeat: no-repeat; 217 position: absolute; 218 background-size: 45%; 219 background-position: center,center; 220} 221 222.nav-controls a:nth-child(1):hover, .nav-controls a:nth-child(2):hover { 223 background: #a9927b; 224 -webkit-transition: .5s; 225 transition: .5s; 226} 227 228div.pagination a { 229 background: #FFF; 230} 231 232div.pagination span.current { 233 font-weight: bold; 234 background-color: #6f6255; 235 border-color: #6f6255; 236 color: #fff; 237} 238 239div.navigation div.bottom { 240 margin-top: 10px; 241 bottom: 10px; 242} 243 244a.thumb { 245 padding: 6px 4px 2px 4px; 246 display: block; 247 border: 1px solid #c3bbb3; 248 background: #FFF; 249} 250 251div.pagination a, div.pagination span.current, div.pagination span.ellipsis { 252 display: block; 253 margin-right: 2px; 254 padding: 5px 10px 4px 10px; 255 border: 1px solid #6f6255; 256 height: 31px; 257 display: -webkit-box; 258 display: -ms-flexbox; 259 display: flex; 260 -webkit-box-align: center; 261 -ms-flex-align: center; 262 align-items: center; 263 float: none; 264 border-radius: 5em; 265 margin: 0 3px; 266} 267 268div.pagination a:hover { 269 background-color: #f5eadf; 270 text-decoration: none; 271} 272 273.bottom.pagination a { 274 font-size: 1em; 275} 276 277div.pagination a { 278 background: #FFF; 279} 280 281div.slideshow span.image-wrapper { 282 display: block; 283 position: absolute; 284 top: 0; 285 left: 0; 286 border: 1px solid #ceb9a4; 287 padding: 5px; 288 width: 100%; 289} 290 291div.pagination span.current { 292 font-weight: bold; 293 background-color: #6f6255; 294 border-color: #6f6255; 295 color: #fff; 296} 297 298div.content a, div.navigation a { 299 text-decoration: none; 300 color: #333; 301 font-size: .8em; 302 line-height: 18px; 303} 304@media screen and (max-width: 880px) { 305.detail_img_inner { 306 display: block; 307 height: auto !important; 308 } 309 #gallery.content { 310 width: 100%; 311 margin: 0 auto; 312 } 313 .nav-controls a:nth-child(1) { 314 width: 12%; 315 left: 2%; 316 } 317 .nav-controls a:nth-child(2) { 318 width: 12%; 319 right: 2%; 320 } 321 #thumbs.navigation { 322 float: none; 323 width: 100%; 324 margin-right: 0; 325 background: #f7f3ef; 326 position: static; 327 text-align: center; 328 padding: .5%; 329 display: block; 330 margin: 2.5em 0 0 0; 331 } 332 ul.thumbs { 333 display: -ms-flexbox; 334 display: -webkit-box; 335 display: flex; 336 -webkit-box-orient: vertical; 337 -webkit-box-direction: normal; 338 -ms-flex-flow: unset; 339 flex-flow: unset; 340 overflow-x: scroll; 341 overflow-y: unset; 342 } 343 ul.thumbs li { 344 width: calc(25% - 10px); 345 margin: 4px 4px 10px 6px; 346 -webkit-box-flex: 0; 347 -ms-flex: 0 0 100px; 348 flex: 0 0 100px; 349 min-width: 80px; 350 } 351 ul.thumbs img { 352 border: none; 353 display: block; 354 width: 100px; 355 } 356 }

javascript

1var gallery = $('#thumbs').galleriffic({ 2 delay : 4000, 3 defaultTransitionDuration : 500, 4 numThumbs: 50, 5 preloadAhead: 50, 6 enableTopPager: false, 7 enableBottomPager: false, 8 maxPagesToShow: 7, 9 imageContainerSel: '#slideshow', 10 ssControlsContainerSel: '#controls', 11 navControlsContainerSel: '#nav', 12 captionContainerSel: '#caption', 13 loadingContainerSel: '#loading', 14 renderSSControls: false, 15 renderNavControls: false, 16 enableHistory: false, 17 autoStart: false, 18 syncTransitions: true 19 });

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

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

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

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

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

Lhankor_Mhy

2020/07/13 07:45

galleriffic とはプラグインだと思いますが、そのコードとドキュメントがあるページを教えてください。
Lhankor_Mhy

2020/07/13 08:26

Bootstrap を使っていますか?
hati3693

2020/07/13 08:33

いいえ使っておりません。 文字制限のためgallerifficに入っていない自分で追加したCSSのみ記載いたしました。
Lhankor_Mhy

2020/07/14 01:52

ご提示のコードを試してみましたが、そもそも galleriffic が上手く動作しませんでした。 おそらく、ここに提示されていない部分のコードに差異があるのだろうと思いますので、調べてみてますが、時間がかかるのではないかと思いました。
Lhankor_Mhy

2020/07/14 01:55

よく見ると、ダウンロードした examples フォルダにあるサンプルも動作していないようです。環境の問題でしょうか? これは、なかなか大変そうですね……
hati3693

2020/07/14 02:22

すみません、最初にダウンロードした場所がわからず別のページをご紹介したので、内容が違ったのかもしれません・・。 https://34.gigafile.nu/0728-cfcdea46b7beb1557942373078fe06bc1 いらないところを省いたファイルをまとめてお送りいたします。 最初からこうすればよかったですね、すみません・・ 多分これなら画像通りに動くはずです。 よろしくお願いします。。
Lhankor_Mhy

2020/07/14 02:43

わざわざご準備いただいてすみません。
guest

回答1

0

ベストアンサー

ご提示のページを拝見したところ、オプションのonSlideChangeがスライドを変更した時のコールバックの様でしたので、これを使うのがいいと思いました。

js

1 onSlideChange: function(prevIndex, nextIndex) { 2 this.find("li")[nextIndex].scrollIntoView(); 3 },

動作確認済みです。

参考:
Element.scrollIntoView() - Web API | MDN


IE11非対応になりますが、.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})とした方がかっこいいかもしれません。

コメントを受けて追記

下記、IE11で動作確認しました。

js

1 onSlideChange: function(prevIndex, nextIndex) { 2 this.children().scrollTop(this.children().scrollTop()+this.find("li:eq("+nextIndex+")").position().top); 3 },

投稿2020/07/14 03:18

編集2020/07/14 04:05
Lhankor_Mhy

総合スコア35860

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

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

hati3693

2020/07/14 03:26

ありがとうございます。 まさに求めていた通りの動作です! ただ一点、オーバーフロー内のスクロールとページ全体のスクロールがダブルでスクロールされてしまい、サムネにつられてどんどんページが下がってしまう時があるのですが(IEのみ?) 全体のスクロールは含まないように設定は可能なんでしょうか…?
Lhankor_Mhy

2020/07/14 03:38

追記した「IE11非対応」の方であれば、ある程度軽減されると思いますが、いかがですか?
Lhankor_Mhy

2020/07/14 03:38

あ、IEなんですね……
hati3693

2020/07/14 03:46

一応各ブラウザで試しておこうと思いまして・・・ chromeとfirefoxでは理想通りの動きで、edgeとIEでは13枚目らへんから絶望的な感じに… edgeとIEだけいっそこの表記を外したりなんかはできたりしますでしょうか…
Lhankor_Mhy

2020/07/14 04:09

https://gs.statcounter.com/ ↑IEとレガシーEdgeを足しても、シェア率3%です! 思い切って対応をやめてしまいましょう! --- 対応策を追記しました。
hati3693

2020/07/14 04:19

ありがとうございます。全ブラウザで動きました! IEの対応ぜひともやめたいんですけども…上層部がIEを使ってまして… iphoneのsafari以外の一部ブラウザではうまく連動しないのもあったのですが、IEみたいに画像が見れないわけではないので全然大丈夫でした! Lhankor_Mhy様、本当にありがとうございます!
Lhankor_Mhy

2020/07/14 04:22

>上層部がIEを使ってまして… わかります……
hati3693

2020/07/14 04:24

ほかにも会社で使っている一部サービスがIEでしか動かないとか まだまだIE離れができなそうです・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問