質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

997閲覧

Safariやケータイアプリでスクロールを無効にしたい

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/08/29 00:19

wordpress(使用テーマ:cocoon)でサイトを作成しています。

前回こちらのサイトを通して、サイトを開いときに始まるオープニングアニメーション時に、スクロールを無効にする機能を実装しました。
しかし、Safariなどスマートフォンで開く際に、スクロール無効ができていないことに気がつきました。

アニメーションのコードは以下になります。
サイトURL
http://tabizukan-backpacker.com
(参考)
HTML
<div class="disableScroll">
<div class="bg">
<p class="text">Digout</p>

</div></div> <div class ="home"></div> CSS .bg { width: 100vw; height: 100vh; background:  #773c30; animation: bgAnime 1s linear 1.8s forwards; z-index: 2; position: relative; position:fixed; } .text { text-align: center; font-size: 6vw; color: #fff; height: 1em; line-height: 1.2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 7; animation: textAnime2 .1s linear 1.5s forwards; position:fixed; } .text:after{ content: ""; width: 24vw; height: 1.2em; background:  #773c30; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 9; animation: textAnime1 1.3s linear forwards; position:absolute; top:100px; position:fixed; } /*keyframe*/ @keyframes  textAnime1 { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes textAnime2 { 0%{ transform: rotate(0); } 100%{ transform: rotate(-10deg); } } @keyframes bgAnime { 0%{ opacity: 1; } 99%{ opacity: 0; } 100%{ opacity: 0; display: none; } }

なお、Safariなどでスクロールを無効にするコードは、
// スクロールを無効にする
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// スクロール無効を解除する
$(window).off('.noScroll');
と存じます。

このwindowの部分をbgにすればよいのでしょうか。また、このスクロール無効のコードはどの部分に記述すればよいのでしょうか。

やや、煩雑な質問で恐れ入ります。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問