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

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

ただいまの
回答率

89.07%

LP模写中、スクロールができなくなっていた

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 994

ZhvKe5P4HEDEyw

score 10

ページのスクロール。

### 発生している問題・エラーメッセージ
画面のスクロールができない。

https://youtu.be/V_lAhqLXT9A
この動画で、Bootstrapの練習として模写をしていました。
動画主はページをスクロールしているのに、私はスクロールができません。
ナビバーのcourse以下のボタンを### ヘディングのテキスト押すと下にいくのですが、それ以外の方法ではトップ画像の下を見ることができません。

CSSも使っていますが、CSSにコードを書く前からスクロールできていません。
### <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nuno - Responsive Bootstrap Theme</title>
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/fixed.css">
</head>

<body data-spy="scroll"  data-target="#navbarResponsive" >
    <!-- Start Home Section -->
<div id="home">
    <!-- navigation -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a href="#" class="navbar-brand"><img src="img/nuno.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#home" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#course" class="nav-link">Course</a>
                </li>
                <li class="nav-item">
                    <a href="#features" class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a href="#resources" class="nav-link">RESOURCES</a>
                </li>
                <li class="nav-item">
                    <a href="#clients" class="nav-link">Clients</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- End Navigation -->

    <!-- Start Lp -->
    <div class="landing">
        <div class="home-wrap">
            <div class="home-inner">

            </div>
        </div>
    </div>

    <div class="caption text-center">
        <h1>Welcome to Nuno</h1>
        <h3>Udemy Bootstrap 4 Course</h3>
        <a href="#course" class="btn btn-outline-light btn-lg">Get Started</a>
    </div>
    <!-- End Lp -->
</div>
    <!-- End Home Section -->

    <!-- Start Course Section -->
<div id="course" class="offset">
    <div class="col-12 narrow text-center">
        <h1>Nuno Theme Advanced Bootstrap Coirse</h1>
        <p class="lead">Learn Bootstrap by creatingan advanced Bootstrap 4 Responsive Website Template from scratch, with no steps skipped!</p>
        <a href="https://bit.ly/advanced-bootstrap-course" target="_blank" class="btn btn-secondary btn-md">Bootstrap Course</a>

    </div>
</div>
    <!-- End Course Section -->

    <!-- Start Features Section -->
<div id="features" class="offset">

</div>
    <!-- End Features section -->

    <!-- Start Resources Section -->
<div id="resources" class="offset">

</div>
    <!-- End Resources Section-->

    <!-- Start Clients Section -->
<div id="clients" class="offset">

</div>
    <!-- End Clients section-->

    <!-- Start Contact Section -->
<div id="contact" class="offset">

</div>
    <!-- End  Contact section-->



<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End of Script Source Files -->

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

body{
  overflow: hidden;
  font-family: 'Lato',sans-serif;
  color: #505962;
}

/* navgation */

.navbar{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  background: rgba(0, 0, 0, 0.6);
}
.navbar-brand img{
  height: 2rem;
}
.navbar-nav li{
  padding-right: 0.7rem;
}
.navbar-dark .navbar-nav .nav-link{
  color:white;
  padding-top: 0.8rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
  color:#1ebba3
}

/* Lp */
.home-inner{
  background-image: url(img/computers.png);
}
.caption{
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 38%;
  z-index: 1;
  color: white;
  text-transform: uppercase;
}
.caption h1{
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  text-shadow: 0.1rem 0.1rem 0.8rem black;
  padding-bottom: 1rem;
}
.caption h3{
  font-size: 2rem;
  text-shadow: 0.1rem 0.1rem 0.5rem black;
  padding-bottom: 1.6rem
}
.btn-lg{
  border-width: medium;
  border-radius: 0;
  padding: 0.6rem 1.3rem;
  font-size: 1.1rem;
}




/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/
/*--- Extra Bootstrap Column Padding --*/
[class*="col-"] {
  padding: 1rem;
}

/*--- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
margin-left: 0px!important;
margin-right: 0px!important;
}

/*--- Fix for Fixed Navbar jumping on scroll --*/
.fixed-top  {
 -webkit-backface-visibility: hidden;
}

/*--- Fixed Landing Page Section --*/
.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  display: table;
  z-index: -1;
}
.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-inner {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*--- iOS Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999!important;
}
.fixed {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

試したこと

HTMLのbodyタグにscroll=”yes”を行いました。
動画を見直し間違いをチェックしましたがわかりませんでした。

補足情報(FW/ツールのバージョンなど

ここにより詳細な情報を記載してください。

visual studio codeを使っています。
Macbook proです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • ZhvKe5P4HEDEyw

    2019/03/20 17:16

    すみません。探したらありました。
    なんどもお手数おかけして申し訳ないです。

    キャンセル

  • m.ts10806

    2019/03/20 17:21

    動画を見たわけじゃないですが、これって「そういう作り」なんじゃないですか?
    bodyにoverflow: hidden;があることで スクロールを意図的にさせないような作りになってます。

    キャンセル

  • ZhvKe5P4HEDEyw

    2019/03/20 17:25

    なるほど。主はスクロールしながら解説してるので、一旦解除して進めようと思います。問題点がわかりました。本当にありがとうございます。

    キャンセル

回答 1

check解決した方法

0

bodyのoverflow: hidden;を解除する

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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