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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

0回答

411閲覧

skrollrを使用してスマホ版chromeでプレビューすると上にスクロールする際に更新が表示されてしまう

hakata

総合スコア7

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/01/29 15:06

編集2022/01/12 10:55

Webの勉強を始めて3ヶ月目です。 よろしくお願いします。

skrollrを用いてモバイル版のchromeでプレビューをしてみたところ 上にスクロールするとページのどの位置であってもスワイプで更新されてしまい困っています。(普段なら画面最上部で上にスワイプすると表示されるアレです)

skrollrを外してプレビューするとこの症状が現れないのでskrollrに原因があると踏んでいるのですが色々調べてみたのですが、英語が分からずどこをいじれば直るかわかりません。

どなたかご教授よろしくお願いします。

HTML

1コード 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7</head> 8 9<body> 10<div id="skrollr-body"> 11<div class="backgroundcolor" /*ここにスクロールすると背景の色が変化する記述*/> 12<section class="top"> 13<div class="links"> 14 <a class="btn" href="#middle">middleへスクロール</a> 15 <a class="btn2" href="#content">contentへスクロール</a> 16 <a class="btn3" href="#bottom">bottomへスクロール</a> 17</section> 18<section class="middle" id="middle">内容</section> 19<section class="content" id="content">内容</section> 20<section class="bottom" id="bottom">内容</section> 21<footer>フッター内容</footer> 22</div>/*backgroundcolor_end*/ 23</div>/*skroll-body_end*/ 24 25/*Jqueryここから*/ 26<script src="js/jquery-1.10.2.min.js"></script> 27<script src="js/skrollr.min.js"></script> 28<script type="text/javascript"> 29/*パララックスの実行*/ 30$(function(){ 31 var skrollrIns = skrollr.init({ 32 forceHeight: false, 33 }); 34 35 $('.btn').on('click', function(e){ 36 e.preventDefault(); 37 //skrollrでアニメーションスクロール 38 skrollrIns.animateTo(1000, {duration:400, easing:'swing'}); 39 }); 40 $('.btn2').on('click', function(e){ 41 e.preventDefault(); 42 //skrollrでアニメーションスクロール 43 skrollrIns.animateTo(2000, {duration:400, easing:'swing'}); 44 }); 45 46 $('.btn3').on('click', function(e){ 47 e.preventDefault(); 48 //skrollrでアニメーションスクロール 49 skrollrIns.animateTo(3000, {duration:400, easing:'swing'}); 50 }); 51}); 52 53</script> 54</body> 55 56</html>

CSS

1コード 2 html{ 3 height: 100%; 4 } 5 6body{ 7 overflow-x: hidden; 8 height: 100%; 9 } 10 11.skrollr-body{ 12 height: 100% !important; 13 } 14 15.top, .middle, .content, .bottom{ 16 height: 1000px; 17 } 18 19

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

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

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

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

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

Tomak

2018/01/30 02:33

関連するHTMLとJavaScriptコードを公開していただけないでしょうか? CSSも関連しているのであれば一緒にお願いします。
Tomak

2018/01/31 11:04

「上にスクロールするとページのどの位置であってもスワイプで更新されてしまい困っています」とは、スワイプで背景色が変化するということでしょうか?(←そうであればskrollrの仕様通りなのですが。) どのようなことを実現したいのか追記していただけないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問