未分類

スクロールできない、慣性スクロールが効かない問題を解決した。

スマホやタブレットでハンバーガーメニューを開いた時に、スクロールできなかったり、慣性スクロールが効かない問題が発生しました。備忘録として解決策を書きます。

※本記事は2020年5月時点の情報です。

 

■悩みと解決策

① position: fixed;を指定したときスクロールできない(画面が動かない)。

→overflow-y: scroll;を書けばスクロールできるようになる。

②overflow-y: scroll;を書いた。今度は慣性スクロールができない。カクカクした動きになる(滑らかに動かない)。

→HTMLを入れ子構造にする。position: fixed;とoverflow-y: scroll;を分けて書く。

 

■残課題

・iOSの場合、画面の上端と下端のそれぞれで、画面外(外側へ)へスクロールしようとするとフリーズする(2秒程度)。調べたところ、iOSのバグ。諦めるか、JavaScriptで書くしかない。

 

最終的に以下のコードで動きました。

-webkit-overflow-scrolling: touch;は削除してよさそうです。




<div class="fade-nav">
  

<div class="fade-wrap">
  ...
</div>

</div>



 

.fade-nav {
  display: none;
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  height:100%;
  transition: all .3s ease-in-out;
  z-index: 100;
}
.fade-wrap{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

5月のつぶやき

コロナが長引いてますね。
緊急事態宣言が延長されることに。。
家にずっといると退屈ですよね。

動画や本で暇つぶししませんか?

下記のサービスはどれも30日以内に解約すれば完全無料です。0円で試せるのでぜひ。

プライム・ビデオでは14,000本の動画が見放題です。「君の膵臓をたべたい」がイチオシ。浜辺 美波がかわいい。

Audible(オーディブル)では本を1冊聴けます。ホリエモンの多動力がおすすめ。

Amazon Music Unlimitedでは音楽が聴き放題です。Official髭男dismやback numberの曲も。自分はブログ書くときに聴いてます。
※今は期間限定で3ヶ月無料です。チャンス。
  • この記事を書いた人

まさ

Webサイト制作のフリーランスエンジニア。WordPress、SEOが専門。東大大学院経済→富士通営業→iSara6th。広島市在住の30歳。TOEIC960。フリーランス5ヶ月目で月収40万円達成。ブログではWeb製作やプログラミング学習法について書きます。Web製作のご相談をお待ちしております。

おすすめ記事

1

プログラミングの独学が大変。1人で勉強してるけどモチベーションが上がらない。Progateは難しいし。分からないところを質問できる相手もいない。2時間かけてググっても答えが見つからない。このままだと挫 ...

2

Photoshopでデザインカンプを作れるようになりたい。おすすめの方法があれば教えて。by コーダー このような疑問に答えます。 記事の内容 Photoshopでデザインカンプを作る方法をUdemy ...

-未分類

Copyright© まさWEB , 2020 All Rights Reserved Powered by AFFINGER5.