以下に、vue.js-p のスクロールバーを非表示にしつつもスクロール効果を持たせる実装方法を紹介します。参考になると思います。
コンポーネントは固定の高さでラップされています p
mounted () { var bop = document.getElementById(this.id); if(bop == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ bop.addEventListener('DOMMouseScroll', function(event) { //火狐 var evt = window.event || arguments[0] if (evt.detail <= -3) { bop.scrollTop=bop.scrollTop-10 } else if (evt.detail >= 3) { bop.scrollTop=bop.scrollTop+10 } evt.stopPropagation(); evt.preventDefault(); }, false); }else{ bop.addEventListener("mousewheel",function(event) { var evt = window.event || arguments[0] evt.returnValue = false //屏蔽body滚动事件 if (evt.wheelDelta <= -120) { bop.scrollTop=bop.scrollTop+40 } else if (evt.wheelDelta >= 120) { bop.scrollTop=bop.scrollTop-40 } }) } } }
上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。
関連記事: タイピング効果を実現する
vue.jsプロジェクトnginxデプロイメントチュートリアル
以上がdiv スクロール バーを使用して非表示にするが、vue.js でスクロール効果を持たせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。