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

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

ただいまの
回答率

87.77%

skrollrを使って縦にスクロールさせたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,990
退会済みユーザー

退会済みユーザー

http://prinzhorn.github.io/skrollr/

上記のサイトのskrollrを使ってスマホ用に縦にスクロールさせたいのですが、うまくいきません。

色々なサイトのサンプルを試すのですが、綺麗に動いた試しがありません。

skrollr使って簡単で簡潔にスクロールする方法はありますでしょうか?

1ページに背景画像1枚としてページ分スクロールさせたいです。

参考サイトをみて以下のように作りましたが、スムースに動きませんでした。

アドバイスを頂けると幸いです。

[html]

<!DOCTYPE HTML>
<html class="fsvs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/top_style.css">
<link rel="stylesheet" type="text/css" href="css/flow_style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/skrollr.js"></script>


<title>TEST COMPANY</title>
</head>

<body>
<header>
  <h1><a href="index.html"></a></h1>
</header>
<nav>
  <div id="ham-menu">
    <ul>
      <li><a href="index.html" title="ホーム">ホーム</a></li>
      <li><a href="#" title="コンセプト">コンセプト</a></li>
      <li><a href="#" title="ギャラリー">ギャラリー</a></li>
      <li><a href="#" title="制作の流れ">制作の流れ</a></li>
      <li><a href="#" title="注文">注文</a></li>
      <li><a href="#" title="会社概要">会社概要</a></li>
      <li><a href="#" title="問い合わせ">問い合わせ</a></li>
    </ul>
  </div>
  <div id="menu-background"></div>
</nav>

<div id="content1" data-0="top:0%;opacity:1;" data-3000="top:100%;opacity:0.3;" >
<!-- / .content1 --></div>

<div id="content2" data-3000="opacity:1;" data-6000="opacity:0;">
<!-- / .content2 --></div>

<div id="content3" data-6000="top:0%" data-9000="top:100%">
<!-- / .content3 --></div>

<div id="content4" data-6000="background-position:0px 0px;" data-12500="background-position:0px -500px;">
<!-- / #content4 .content4 --></div>

<p id="leftout" data-0="left:50%;" data-3000="left:-100%;">Left Out</p>

<div id="transform" data-1000="top:100%;transform:scale(0) rotate(0deg);opacity:1;" data-3000="top:50%;transform:scale(4) rotate(360deg);" data-6000="opacity:0;">
  <p>Transform</p>
<!-- / #transform --></div>

<div class="box" data-9000="top:10%;left:30%;" data-11000="top:-50%">
  <p>テキストテキストテキストテキストテキストテキスト </p>
<!-- / .box --></div>

<div class="easing">
  <p data-6500="left:50%;top[cubic]:100%;" data-9000="top:0%;">cubic</p>
  <p data-6500="left:30%;bottom[quadratic]:100%;" data-9000="bottom:0%;">quadratic</p>
  <p data-6500="left:70%;bottom[swing]:100%;" data-9000="bottom:0%;">swing</p>
<!-- / .easing --></div>

<p class="end" data-10000="opacity:0;left:50%;top:50%;" data-11000="opacity:1">end</p>
</body>
</html>


[CSS top_style]

@charset "UTF-8";
/* CSS Document */

* {
    margin:0 auto;
    padding:0;
}

body {
    width:100%;
    color:#333;
    font-size:14px;
}

header {
    width:100%;
    margin-top:20px;
    margin-bottom:20px;
}

h1 {
    display:block;
      width:80px;
      height:80px;
      background-image:url("../img/icon.png");
      background-repeat:no-repeat;
    text-align:center;
}

h1 span {
    display:none;
}

h1 a {
    display:block;
      width:100px;
      height:100px;
}

.header_p1 {
    padding-left:20px;
    font-weight:bold;
    padding-top:25px;
    text-align:center;
}

a:link {
    color:#333;
    text-decoration:none
}
a:visited {
    color:#333;
    text-decoration:none
}
a:hover {
    color:#333;
    text-decoration:none
}
a:active {
    color:#333;
    text-decoration:none
}

a:hover {
   opacity: 0.5;
}

ul {
    list-style:none;
    line-height:2.5em;
}

/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -300px; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 300px; /*メニュー横幅①*/
    z-index: 1000;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン(フォント)色*/
    content: "≡"; /*メニューアイコン*/
    display: block;
    font-size: 50px; /*アイコン(フォント)サイズ*/
    height: 50px;
    line-height: 50px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-300px); /*メニュー横幅①と合わせる*/
}

#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}


img { max-width:100%; height:auto; vertical-align:bottom; }

.clearfix {
 *zoom: 1;
}

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

[CSS flow_style]

@charset "UTF-8";
/* CSS Document */

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow-x:hidden;
}

.skrollable {
    /*
     * First-level skrollables are positioned relative to window
     */
    position:fixed;

    /*
     * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
     */
    z-index:100;

    /*
     * Use with caution
     */
            transition: all .3s;
       /*-o-transition: all .3s;*/
        -ms-transition: all .3s;
       -moz-transition: all .3s;
    -webkit-transition: all .3s;
}

.skrollable.notransition, .notransition .skrollable {
            transition: none;
         -o-transition: none;
        -ms-transition: none;
       -moz-transition: none;
    -webkit-transition: none;
}

.skrollable.hidden {
    display:none !important;
}

.skrollable .skrollable {
    /*
     * Second-level skrollables are positioned relative their parent skrollable
     */
    position:absolute;
}

.skrollable .skrollable .skrollable {
    /*
     * Third-level (and below) skrollables are positioned static
     */
    position:static;
}
html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow-x:hidden;
    font-size:14px;
}
.nav {
    width:100%;
    z-index:101;
    position:fixed;
    background:#000;
    overflow:hidden;
    height:50px;
    color:#fff;
}
#interval {
    text-align:right;
    margin:0 10px 0 0;
}
.nav li {
    float:left;
    list-style:none;
    margin: 0 10px 0 0;
}
.nav li a {
    color:#FFFFFF;
}
#wrap {
    position:relative;
}
#content1 , #content2 , #content3,#content4{
    height:3000px;
    width:100%;
    position:fixed;
    left:0;
    top:0;
}
#content1 {
    z-index:99;
    background:url(img/01.jpg) no-repeat;
}
#content2 {
    z-index:98;
    background:url(img/02.jpg) no-repeat;
}
#content3 {
    z-index:97;
    background:url(img/03.jpg) no-repeat;
}
#content4 {
    z-index:95;
    background:url(img/04.jpg) no-repeat;
}
.box {
    z-index:96;
    width:500px;
}
#leftout {
    margin-top:400px;
    color:#fff;
    font-size:30px;
}
#transform {
    width:100%;
    text-align:center;
}
#transform p {
    color:#1641a3;
}
.easing p {
    font-size:18px;
    background:#39F;
    color:#fff;
    margin:0;
    padding:10px 20px;
}
.end {
    font-size:22px;
}
/* page-top */
#page-top {
    z-index:100;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #000;
    text-decoration: none;
    color: #fff;
    padding: 20px;
    text-align: center;
    display: block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #333;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/08/25 13:14

    承知しました。修正または削除して投稿し直します。

    キャンセル

  • m.ts10806

    2017/08/25 13:38

    ソースありがとうございます。まだ動作検証してないのですが、「PCでは思ったとおりだけどスマホでは動かない」「どの環境(ブラウザ、PC、スマホ含めて全て)でも想定どおりにならない」など、確認状況も追記していただけると助かります。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/08/25 13:47

    ありがとうございます。iPhone 6 plus でsafariで動かしています。PCはMac Book ProでChromeで動かしています。PCは正常に動きましたがスマホはスムースにスクロールしませんでした。全くスクロールしないわけではないです。

    キャンセル

回答 1

checkベストアンサー

0

ドキュメントは読みましたか?

https://github.com/Prinzhorn/skrollr/blob/master/README.md#the-problem-with-mobile-and-the-solution

When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms.

モバイルでskrollrを使用すると、実際にはスクロールしません。モバイルブラウザを検出すると、skrollrはネイティブスクロールを無効にし、代わりにタッチイベントをリッスンし、CSSトランスフォームを使用してコンテンツ(より具体的には#skrollr-body要素)を移動します。

続いてWhat you need in order to support mobile browsers(モバイルブラウザをサポートするために必要なもの)とあり、id skrollr-bodyをつけてください云々書いてあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/25 15:19

    ありがとうございます。読んだのですが、まだ初心者ゆえ、コードの多さに頭がショートしておりました…。頭を冷やしてじっくり読もうと思います。

    キャンセル

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

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る