Q&A
ご提示のサイトに<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 522px;">のような記述は見受けられませんでしたが...
質問者さんのコードを乗せていただくと早期解決になります。
Javascript初心者です。
スマートニュースやグノシーのような、スワイプタブ切替機能を実装する
https://www.tam-tam.co.jp/tipsnote/html_css/post9210.html
（https://github.com/okunotam/tamtipsnote/tree/master/slideTab）
上記サイトをレスポンシブ時で確認すると<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 522px;">が出現します。
そのクラスのheightを変更しようとしてもcssではなくインライン要素で、しかもJqueryで高さを計算しているようでした。。
該当している要素には「event」が発生し下記のような内容が設定されていています。
ただ該当しそうな要素を変更してみても高さが変わらなかったです。
詳しい方いましたらどこを見ればいいのかアドバイスよろしくお願いいたします。
index.html
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, user-scalable=no"> 6<link rel="stylesheet" type="text/css" href="assets/css/reset.css" /> 7<link rel="stylesheet" type="text/css" href="assets/css/common.css" /> 8<title></title> 9</head> 10 11<body> 12<div class="container"> 13 <div class="tabContainer"> 14 <div class="tab"> 15 <div class="tab__button active"><a href="#">トップ</a></div> 16 <div class="tab__button"><a href="#">エンタメ</a></div> 17 <div class="tab__button"><a href="#">スポーツ</a></div> 18 <div class="tab__button"><a href="#">グルメ</a></div> 19 <div class="tab__button"><a href="#">コラム</a></div> 20 <div class="tab__button"><a href="#">国内</a></div> 21 </div> 22 </div> 23 <div class="contents"> 24 25 <div class="contents__content"> 26 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 27 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 28 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 29 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 30 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 31 <div><a href="#"><span>トップコンテンツトップコンテンツトップコンテンツトップコンテンツトップコンテンツ</span></a></div> 32 </div> 33 34 <div class="contents__content"> 35 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 36 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 37 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 38 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 39 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 40 <div><a href="#"><span>エンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツエンタメコンテンツ</span></a></div> 41 </div> 42 43 <div class="contents__content"> 44 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 45 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 46 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 47 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 48 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 49 <div><a href="#"><span>スポーツコンテンツスポーツコンテンツスポーツコンテンツスポーツコンテンツ</span></a></div> 50 </div> 51 52 <div class="contents__content"> 53 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 54 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 55 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 56 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 57 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 58 <div><a href="#"><span>グルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツグルメコンテンツ</span></a></div> 59 </div> 60 61 <div class="contents__content"> 62 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 63 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 64 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 65 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 66 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 67 <div><a href="#"><span>コラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツコラムコンテンツ</span></a></div> 68 </div> 69 70 <div class="contents__content"> 71 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 72 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 73 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 74 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 75 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 76 <div><a href="#"><span>国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ国内コンテンツ</span></a></div> 77 </div> 78 79 </div> 80</div> 81<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 82<script>window.jQuery || document.write('\x3cscript src="/assets/js/jquery-2.1.4.min.js"\x3e\x3c/script\x3e')</script> 83<script src="assets/js/jquery.bxslider.js"></script> 84<script src="assets/js/common.js"></script> 85</body> 86</html>
css
1body{ 2 font-family:-apple-system,’Lucida Grande’,‘Helvetica Neue’,’Hiragino Kaku Gothic ProN’,‘游ゴシック’,’メイリオ’,meiryo,sans-serif; 3 4 -webkit-text-size-adjust: 100%; 5} 6 7.container{ 8 max-width: 400px; 9 margin: auto; 10} 11 12.tabContainer { 13 overflow-x: auto; 14} 15.tabContainer::-webkit-scrollbar { 16 height: 5px; 17} 18.tabContainer::-webkit-scrollbar-track { 19 background: #000; 20} 21.tabContainer::-webkit-scrollbar-thumb { 22 background: #000; 23} 24 25.tab{ 26 display: table; 27 margin-top: 20px; 28} 29 30.tab__button{ 31 display: table-cell; 32 text-align: center; 33 background-color: #000; 34 vertical-align: middle; 35 border: 2px solid white; 36 border-bottom-width: 4px; 37 min-width: 80px; 38} 39 40.tab__button.active{ 41 border-bottom: none; 42} 43 44.tab__button a{ 45 padding: 10px; 46 color: #fff; 47 display: block; 48 text-decoration: none; 49 font-size: 12px; 50} 51 52.contents__content{ 53 background-color: #ccc; 54 text-align: center; 55} 56 57.contents__content div{ 58 clear: left; 59} 60 61.contents__content div a{ 62 display: table; 63 width: 100%; 64 text-decoration: none; 65 padding: 10px; 66 border-bottom:1px solid #000; 67 color:#222; 68 text-align: left; 69 line-height: 1.5em; 70 font-size: 14px; 71} 72 73.contents__content div a span{ 74 display: table-cell; 75 padding-left: 10px; 76 padding-right: 10px; 77} 78 79.contents__content div a:before{ 80 content:''; 81 width: 50px; 82 height: 50px; 83 display: block; 84 background-color: #fff; 85 display: table-cell; 86}
jQuery（該当のevent）
1function(e) { 2 if (slider.working) { 3 e.preventDefault(); 4 } else { 5 // record the original position when touch starts 6 slider.touch.originalPos = el.position(); 7 var orig = e.originalEvent; 8 // record the starting touch x, y coordinates 9 slider.touch.start.x = orig.changedTouches[0].pageX; 10 slider.touch.start.y = orig.changedTouches[0].pageY; 11 // bind a "touchmove" event to the viewport 12 slider.viewport.bind('touchmove', onTouchMove); 13 // bind a "touchend" event to the viewport 14 slider.viewport.bind('touchend', onTouchEnd); 15 } 16}
ご指摘ありがとうございます。レスポンス時が抜けておりました。。修正します。
正しくは下記の内容になります。
【修正】
上記サイトをレスポンシブ時に確認すると<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 522px;">が出現します。
そのクラスのheightを変更しようとしてもcssではなくインライン要素で、しかもJqueryで高さを計算しているようでした。。
再現確認にはhtml,cssも必要です。
htmlとcssも追記しました、、これで大丈夫でしょうか、、（パスがassets/css/common.cssになっていますが随時css/common.cssなど任意のものにしてください、、よろしくお願いします。）
common.js を提示してください。既に提示されている部分だけでは状況の再現が不可能です。
common.js添付したところ文字数オーバーでした、、https://github.com/okunotam/tamtipsnote/tree/master/slideTab の方でご確認していただくしか今の所方法がないです、、申し訳ありません。
先ほど無事解決しました、、コメントくださってありがとうございます。自己解決した回答も掲載しました、、
回答1件
0
ベストアンサー
自己解決できました、、調べてくださった方、コメントとくださった方ありがとうございます、、
jquery.bxslider.js
1 2変更前：adaptiveHeight: false, 3変更後：adaptiveHeight: true, 4
上記に変更して無事解決できました。
複雑な方法でも解決できるみたいでしたが自分には難しかったです、、
投稿2018/12/26 04:15
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
