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

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

ただいまの
回答率

90.37%

  • HTML

    12236questions

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

  • jQuery

    8566questions

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

  • CSS

    8090questions

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

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2780questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

[楽天][スマホ]お買物カゴへページ内遷移するボタンが表示されない。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,585

zeele001

score 7

前提・実現したいこと

楽天ショップのスマートホン商品ページにて
ヘッダーにフィックスさせた検索窓を実装しようと試行錯誤しています。
iosの既知の問題である
「fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう」
というところをまずは解消しました。

結果発生した問題となります。

発生している問題

楽天がデフォルトで実装している、
お買物カゴへページ内遷移するボタンが表示されません。

当店の商品ページ
現状はこのような形で、ヘッダーにフィックスさせた状態で、
iosのページトップへ戻ってしまう問題も回避できておりますが、
その結果スクロール後に表示される
「お買物カゴ」ボタンが表示されなくなってしまいました。

他店舗さまの商品ページ
他店舗様では問題なく、スクロール後に「お買物カゴへ」ボタンが
右下に表示されるかと思います。

恐らくはiosのバグを解消するために設定したこちらのcssが原因では、
と思っているのですが、いかんせん解決策がわかりません。

html, body {
    height:100%;
}

以下のページ内で指定しているCSSを記載します。

ソースコード

/*検索ボックスの親*/
#rstTopSearch {
    position:fixed;
    top:0;
    left:0;
    width:100% !important;
    padding:0 !important;
    z-index:9999;
}

/*
全体の親要素を絶対位置表示、
高さをディスプレイいっぱいに広げ
その中でコンテンツをスクロールさせています。
*/
article.current {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    height:100%;
}

/*
上記CSSを生かすために
HTMLとbodyにも高さを指定しています。
*/
html, body {
    height:100%;
}

最後に

ヘッダーに検索窓をフィックスさせ、iosのバグを回避した状態までは来ることが出来ました。
最後にこのお買物カゴへの遷移ボタンが通常通り表示、機能してくれれば、
目指す要件をすべて実装できる、というような段階です。

どなたか回避策や案などをお持ちの方。
お知恵を貸していただければ幸いです。

宜しくお願いします。

━━━━━━ここから追記━━━━━━
2016.03.16.18:10
現在試行錯誤しながら進めているためページ内の状況が元のものから変更されております。
また時間をおいて元に戻しますのでその際にお力添えいただければ幸いです。

━━━━━━ここから追記━━━━━━
2016.03.17.13:34
質問当初のページ内容に戻しました。
引き続きお力添えいただければ幸いです。
宜しくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • ogaaaan

    2016/03/22 14:39

    Macつかってるなら直接USBケーブルでiPhoneなどと接続してインスペクタ開くと実際の画面を見ながらデバグできます。そこまでは準備しておいたほうが良いかもしれないすね。
    http://www.islog.jp/entry/ios-safari-web-inspecter/

    キャンセル

  • zeele001

    2016/03/22 19:11

    度々ありがとうございます。
    マックを持っていないのですが、今後の参考にさせていただきます。

    キャンセル

回答 2

checkベストアンサー

0

スマホ版で右下に「上へ」と「かごへ」のボタンが表示されないということでしょうか。
design_sp.cssの118行目に

#floatingButtons {
    display: none !important;
}


が設定されているのが原因かと思います。
!importantの部分を削除して確認してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/29 13:49

    ご回答ありがとうございます。
    こちら楽天側が用意したjsにより、
    スクロールを検知してディスプレイブロックになるようです。

    こちらからディスプレイブロックにすることで表示はされるものの…
    ページ内遷移が機能しないようになってしまっております。

    恐らく下記CSSでiosのバグを回避した影響かと思われますが、

    /*
    全体の親要素を絶対位置表示、
    高さをディスプレイいっぱいに広げ
    その中でコンテンツをスクロールさせています。
    */
    article.current {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    height:100%;
    }

    /*
    上記CSSを生かすために
    HTMLとbodyにも高さを指定しています。
    */
    html, body {
    height:100%;
    }

    あちらを立てればこちらが立たず状態でございます。

    ご回答ありがとうございました。

    キャンセル

  • 2016/03/29 16:25

    ボタンは楽天側のスクリプトで制御されているようですが、
    ソースを読み解く力は私にはありませんでした。
    詳しい方の回答に期待したいと思います。

    力技ではありますが、
    ページ内スクロールのみであれば
    該当箇所にaタグを追加しリンクが機能するか試してみて
    別途jqueryなどを使って似た実装してしまうのが早いかもしれません。

    キャンセル

0

スマホではスクロールに対して大きな抵抗はないだろう、と自分に言い聞かせ。
取り急ぎ現状のまま置いておくことにいたしました。

どうしてもという時の回避策として、jqueryによりお買物カゴへ遷移するボタンを生成することで回避できそうです。
お付き合いいただきありがとうございました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • HTML

    12236questions

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

  • jQuery

    8566questions

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

  • CSS

    8090questions

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

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2780questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。