前提
ECサイト(Ec-cube4系利用)を作っています。💻
スクロール機能(nicescroll.js)を実装中に高さをリサイズするイベントが発生せず終了する課題を抱えています。具体的に描画の遅いコンテンツが後から描画されてもともと計算された高さを埋めていって、ボトムコンテンツやフッターコンテンツ分の高さ取得ができずに見え隠れする状態です。😎
実現したいこと
プラグインのリサイズイベントが動作するようにする❢
エラーメッセージは特になく高さを取得する方法が分かりません。☠ ```ここに言語名を入力 jQuery(TWIG(PHP)) {# scroll #} {% set ua=app.request.headers.get('User-Agent') %} {% if (ua matches ('/Android|firefox/') and ua.indexOf('/mobi/') > -1 ) or ( ua matches ('/windows/') and ua.indexOf('/phone/') > -1 ) or ( ua.indexOf('/nexus 4|nexus 5|nexus 6|nexus 5x|nexus 6p|nexus One|nexus S|Galaxy Nexus|blackBerry/') > -1 ) %} {% elseif (ua matches ('/Android|firefox/')) or ( ua matches ('/windows/') and ua.indexOf('/phone/') > -1 ) or ( ua.indexOf('/nexus 4|nexus 5|nexus 6|nexus 5x|nexus 6p|nexus One|nexus S|Galaxy Nexus|blackBerry/') > -1 ) %} {% elseif ua matches ('/iPad|iPhone|iPod/') or ((navigator.platform matches 'MacIntel') and navigator.maxTouchPoints > 1) %} {% elseif (ua matches ('/Android|firefox/') and ua.indexOf('/mobi/') > 1 ) or ( ua matches ('/windows/') and ua.indexOf('/phone/') > 1 ) %} {% else %} <style>div[id^='ascrail']{-moz-border-radius:100vh;-webkit-border-radius:100vh;border-radius:100vh;display:block;background:rgba(205, 102, 192, 0.4);opacity: 0;overflow-x:hidden;-moz-overflow-x:hidden;-webkit-overflow-x:hidden;width:inherit;-webkit-transition:1.0s;-moz-transition:1.0s;transition:1.0s}div#ascrail2000:hover{transition:all 300ms;background:#ff6b37a8!important;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:transparent;-tap-highlight-color:transparent;outline:0}body{overflow:auto!important}</style> <link rel="preload prefetch" as="script" href="{{ asset('assets/js/jquery.nicescroll-3.7.6/jquery.nicescroll.min.js') }}?{{ 'now'|date('U') }}"> <script src="{{ asset('assets/js/jquery.nicescroll-3.7.6/jquery.nicescroll.min.js') }}?{{ 'now'|date('U') }}" ></script> {# <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js" integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig==" crossorigin="anonymous" referrerpolicy="no-referrer" as="script"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js" integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> #} <script > $(document).ready(function() { {# $("body").niceScroll({cursorborder:"1px solid rgba(48, 249, 180, 0.7)",cursorcolor:"mediumaquamarine",cursorwidth:"12px",cursoropacitymax:"0.7",cursoropacitymin:"0.4",cursorborderradius:"100vh",cursorminheight:30,scrollspeed:50,mousescrollstep:30,zindex:"4",background:"#ea9b7f61",mousescrollstep:25}); #} $("body").niceScroll({cursorborder:"1px solid rgba(9, 164, 241, 0.7)",cursorcolor:"#7fb1ea",cursorwidth:"12px",cursoropacitymax:"0.7",cursoropacitymin:"0.4",cursorborderradius:"100vh",scrollspeed: 50,mousescrollstep:30,zindex:"4",background:"#ea9b7f61",disablemutationobserver:true,oneaxismousemode:"auto",autohidemode:true,hidecursordelay:400,horizrailenabled:false,cursorfixedheight:false,cursorminheight:20,enablekeyboard:true,bouncescroll:false,smoothscroll:true,iframeautoresize:true,enableobserver:true}); {# $('#ascrail2000').show(); #} }); setTimeout(function(){ $("body").getNiceScroll().resize() }, 3000); </script> {% endif %}
試したこと
ここに問題に対して試したことを記載してください。
参考サイトを漁って試してみたが撃沈。⚓古いプラグインでサポ終了しているので最新ブラウザに対応できていなかったりソースコードに問題があるのかどっちかですが切り分け作業が出来ません。。。
➊公式GIT(リサイズイベント)
➋リサイズイベントが発生しない
❸リサイズが効かないんだけど
❹スクロールをロードしてからデフォルトのスクロールバーを読み込む?
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
問題のサイトはコチラ
お忙しいところ恐縮ですが何かしらのヒントが有れば教えていただけますでしょうか。
どうぞよろしくお願いいたします。🐈
あなたの回答
tips
プレビュー