忍者ブログ
26 April

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

17 May

スムーズスクロールとモーダルウィンドウのアンカーリンクによる干渉

アンカーリンクでとばすモーダルウィンドウを使ったら、モーダルが開かない。
おかしい、と思いググったら、スムーズスクロールと干渉するらしい。
どっちもアンカーリンクでとばしてるので、干渉してモーダルが開かなくなる。
なんやかんややって、モーダルjsを切ってるのに超簡単な手書きスムーズスクロールまで動かなくなった。別の簡単なコード拾ってきて色々いれてもまったくスムーズしてくれない。
今回はjsいれまくってるので何が原因かゼンゼンわかんねー。
jqueryわかんないので、この場合は無効!とか書けないし・・・。

jsプラグインはあまりいれたくないけど、特定のリンクはスムーズさせない機能があるsmoothScroll.jsを試すことにした。

http://blog.webcreativepark.net/2007/07/12-143406.html
http://blog.livedoor.jp/tacshock-code14/archives/7502921.html

いれてみたらsmoothScroll.jsが動く!ぬるぬるっと動く!なんでだよ。
簡単コードは動かずこれが動くって意味わかんねーよ。
そんでスムーズスクロール無効機能

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

を入れたらモーダル開いた!!やったー;;;
date属性じゃなくてclassでも指定できるけど、書き換えなきゃいけなくてもうめんどくせーっておもってやめた。date属性は文字数長いから本当はやだけど・・・。


いまやナビゲーションメニューでスムーズスクロール入れるのってほぼ当たり前でしょう。
私はどうでもいいんだけど、なんかいれたがるからさ・・・。
そうするとそこにタブ機能やモーダルウィンドウ使ってアンカーリンクで飛ばすと、バッティングする可能性はかなり高いわけだと思う。
それなのにあんまり検索してもでてこないのはなぜ?
でも私も初めてこの現象になったわけだから、そうメジャーでもないのかなあ?

つまりスムーズスクロールの設定には無効機能が必須だと思うんだよ。
こういうことが普通にありえる干渉なわけだし。

smoothScroll.jsの欠点はサイドメニューを開く閉じる、などのボタンのアンカーリンクにも全部無効機能を書き込まなきゃいけないこと。
メニュー隠しててクリックで表示ってやってたら、確実に意図せずぬるぬる動きまくる。
PR