、スクロールバーを非表示にして同時にスクロールバーを表示し、オーバーフローを隠す

私はこのようなウェブサイトをhttp://www.grannyssecret.com（リンク先ページのみ）にしようとしています。、スクロールバーを非表示にして同時にスクロールバーを表示し、オーバーフローを隠す

スクロールして上にスクロールするとスムーズに表示され、下にスクロールすると下にスクロールします。

私のHTMLファイルは、ボタンをクリックすると同じことを模倣できますが、マウスホイールをスクロールしてフッターをアニメートしようとすると機能しません。

問題は、スクロールしているイベントが複数回発生していることです。また、オーバーフローが隠しスクロールに設定されている場合、イベントは発生しません。

この問題を回避する方法はありますか？

私の代わりに「スクロール」の"wheel"イベントを使用してみてくださいjsfiddle https://jsfiddle.net/vd6qgLL2/3/

出典

2016-05-12 Paul

質問** NB - **コードを乱用しないでください。

document.getElementsByTagName("body")[0].addEventListener("wheel", function() { //your code here });

あなたのリファクタリングフィドルを見つけてください。この要件を回避するためのブロック**。 –

サイトを見ると、jQueryを使用してスクロールにクラスを追加します。次に、CSSアニメーションを使用してフッターブロックをスライドさせて表示します。 'transform：translate（0,100％）;'を 'transform：translate（0,0）;'というように使います。 – Andrew

にjqueryのを使用するように見えることはできません。質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、デバッグの助けを求めるhttps://jsfiddle.net/mp0a6Ln6/

出典

2016-05-12 11:35:07 rtrukhin

、スクロールバーを非表示にして同時にスクロールバーを表示し、オーバーフローを隠す

答えて

関連する問題