Q&A
色々考えてもらいたいので回答にせずにこちらに書きますが、
そもそも<html>タグにclassをつけるというのは基本的にないことだと思いますし、
containsはclassListでは持ってない機能なんじゃないかと。
https://developer.mozilla.org/ja/docs/Web/API/Node/contains
また、「存在したときだけ」定義されるfunctionというのも実装として微妙です。
no_scrollはどこで呼ばれるんでしょうか？
などなど。
画面サイズが小さいときはハンバーガーボタンが表示されるウェブサイトを作っています。
このハンバーガーボタンをクリックすると、
１．htmlタグにopenというクラス名がつく
２．それに伴いナビゲーション部分が全画面に表示される
という2つの動きが生じる仕様にしています。
このときに画面でスクロールができると不都合が生じるので、スクロールを禁止したいと考えています。
CSSで
css
1html.open, .open body { 2 overflow: hidden; 3}
というコードも作ってみましたが、iPhoneで確認したところスクロールされてしまいました。
そこで「htmlタグにopenというクラス名がついたときは、スクロールを禁止する」というJavaScriptを作ることにしました。
といってもJavaScriptは今までちゃんと使ったことはないので、ネットでコードを検索することにしました。
その結果、「特定のクラス名があるかどうかを判別して条件分岐する」という以下のサイトと
https://www.imamura.biz/blog/27372
「【javaScript】でスクロールを禁止にする」という以下のサイト
https://programming.sincoston.com/no-scroll-pc-mobile/
を参考に、自分でも次のようなコードを作ってみました。
JavaScript
1var html = document.getElementsByTagName('html'); 2 3if (html.classList.contains('open') == true) { 4 // スクロール禁止 5 function no_scroll() { 6 // PCでのスクロール禁止 7 document.addEventListener("mousewheel", scroll_control, { passive: false }); 8 // スマホでのタッチ操作でのスクロール禁止 9 document.addEventListener("touchmove", scroll_control, { passive: false }); 10 } 11 12 // スクロール関連メソッド 13 function scroll_control(event) { 14 event.preventDefault(); 15 } 16}
しかし動きません。
ディベロッパーツールをみると、2行目の「containsが読み取れない」ということなのですが、直し方がわかりません。
修正の方法が知りたいです。
よろしくお願いします。
回答1件
0
スクロール禁止の部分の動作については確認していません。
「containsが読み取れない」の原因はgetElementsByTagNameは配列を取得するメソッドのためです。
以下の様に修正をすればとりあえずエラーは解消されると思います。
var html = document.getElementsByTagName('html')[0];
オブジェクトでも配列でもそうですが、ネストされた要素を操作しようとしてエラーが出た場合は、一つずつ上位の階層をconsole.logなどで見てみることが大事です。
今回であればgetElementsByTagNameの定義を調べれば良いですが、それでなくても
console.log(html.classList)をまず見てみる
→ undefinedと出力
2. console.log(html)を見てみる
→HTMLCollection [html.open]が出力
→[]なので配列かな？
→html[0]で先頭要素を取得してみよう
という感じです。
投稿2021/07/09 08:08
編集2021/07/10 09:15
総合スコア983
あなたの回答
tips
プレビュー
