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


ページのスクロール。

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

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

CSSも使っていますが、CSSにコードを書く前からスクロールできていません。

HTML
1
2### <!DOCTYPE html>
3<html lang="en">
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7	<title>Nuno - Responsive Bootstrap Theme</title>
8	<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
9	<link rel="stylesheet" href="style.css">
10	<link rel="stylesheet" href="css/fixed.css">
11</head>
12
13<body data-spy="scroll"  data-target="#navbarResponsive" >
14	<!-- Start Home Section -->
15<div id="home">
16	<!-- navigation -->
17	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
18		<a href="#" class="navbar-brand"><img src="img/nuno.png"></a>
19		<button class="navbar-toggler" type="button" data-toggle="collapse" 
20		data-target="#navbarResponsive">
21			<span class="navbar-toggler-icon"></span>
22		</button>
23
24		<div class="collapse navbar-collapse" id="navbarResponsive">
25			<ul class="navbar-nav ml-auto">
26				<li class="nav-item">
27					<a href="#home" class="nav-link">Home</a>
28				</li>
29				<li class="nav-item">
30					<a href="#course" class="nav-link">Course</a>
31				</li>
32				<li class="nav-item">
33					<a href="#features" class="nav-link">Features</a>
34				</li>
35				<li class="nav-item">
36					<a href="#resources" class="nav-link">RESOURCES</a>
37				</li>
38				<li class="nav-item">
39					<a href="#clients" class="nav-link">Clients</a>
40				</li>
41				<li class="nav-item">
42					<a href="#contact" class="nav-link">Contact</a>
43				</li>
44			</ul>
45		</div>
46	</nav>
47	<!-- End Navigation -->
48
49	<!-- Start Lp -->
50	<div class="landing">
51		<div class="home-wrap">
52			<div class="home-inner">
53
54			</div>
55		</div>
56	</div>
57
58	<div class="caption text-center">
59		<h1>Welcome to Nuno</h1>
60		<h3>Udemy Bootstrap 4 Course</h3>
61		<a href="#course" class="btn btn-outline-light btn-lg">Get Started</a>
62	</div>
63	<!-- End Lp -->
64</div>
65	<!-- End Home Section -->
66
67	<!-- Start Course Section -->
68<div id="course" class="offset">
69	<div class="col-12 narrow text-center">
70		<h1>Nuno Theme Advanced Bootstrap Coirse</h1>
71		<p class="lead">Learn Bootstrap by creatingan advanced Bootstrap 4 Responsive Website Template from scratch, with no steps skipped!</p>
72		<a href="https://bit.ly/advanced-bootstrap-course" target="_blank" class="btn btn-secondary btn-md">Bootstrap Course</a>
73		
74	</div>
75</div>
76	<!-- End Course Section -->
77	
78	<!-- Start Features Section -->
79<div id="features" class="offset">
80
81</div>
82	<!-- End Features section -->
83
84	<!-- Start Resources Section -->
85<div id="resources" class="offset">
86
87</div>
88	<!-- End Resources Section-->
89
90	<!-- Start Clients Section -->
91<div id="clients" class="offset">
92
93</div>
94	<!-- End Clients section-->
95
96	<!-- Start Contact Section -->
97<div id="contact" class="offset">
98
99</div>
100	<!-- End  Contact section-->
101	
102
103
104<!--- Script Source Files -->
105<script src="js/jquery-3.3.1.min.js"></script>
106<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
107<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
108<!--- End of Script Source Files -->
109
110</body>
111</html>
112
113

CSS
1@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
2
3body{
4  overflow: hidden;
5  font-family: 'Lato',sans-serif;
6  color: #505962;
7}
8
9/* navgation */
10
11.navbar{
12  text-transform: uppercase;
13  font-weight: 700;
14  font-size: 0.9rem;
15  letter-spacing: 0.1rem;
16  background: rgba(0, 0, 0, 0.6);
17}
18.navbar-brand img{
19  height: 2rem;
20}
21.navbar-nav li{
22  padding-right: 0.7rem;
23}
24.navbar-dark .navbar-nav .nav-link{
25  color:white;
26  padding-top: 0.8rem;
27}
28.navbar-dark .navbar-nav .nav-link.active,
29.navbar-dark .navbar-nav .nav-link:hover{
30  color:#1ebba3
31}
32
33/* Lp */
34.home-inner{
35  background-image: url(img/computers.png);
36}
37.caption{
38  width: 100%;
39  max-width: 100%;
40  position: absolute;
41  top: 38%;
42  z-index: 1;
43  color: white;
44  text-transform: uppercase;
45}
46.caption h1{
47  font-size: 3.8rem;
48  font-weight: 700;
49  letter-spacing: 0.3rem;
50  text-shadow: 0.1rem 0.1rem 0.8rem black;
51  padding-bottom: 1rem;
52}
53.caption h3{
54  font-size: 2rem;
55  text-shadow: 0.1rem 0.1rem 0.5rem black;
56  padding-bottom: 1.6rem
57}
58.btn-lg{
59  border-width: medium;
60  border-radius: 0;
61  padding: 0.6rem 1.3rem;
62  font-size: 1.1rem;
63}
64
65
66
67
68/*============ BOOTSTRAP BREAK POINTS:
69
70Extra small (xs) devices (portrait phones, less than 576px)
71No media query since this is the default in Bootstrap
72
73Small (sm) devices (landscape phones, 576px and up)
74@media (min-width: 576px) { ... }
75
76Medium (md) devices (tablets, 768px and up)
77@media (min-width: 768px) { ... }
78
79Large (lg) devices (desktops, 992px and up)
80@media (min-width: 992px) { ... }
81
82Extra (xl) large devices (large desktops, 1200px and up)
83@media (min-width: 1200px) { ... }
84
85=============*/

fixed
1/*--- Extra Bootstrap Column Padding --*/
2[class*="col-"] {
3  padding: 1rem;
4}
5
6/*--- Bootstrap Mobile Gutter Fix --*/
7.row, .container-fluid {
8margin-left: 0px!important;
9margin-right: 0px!important;
10}
11
12/*--- Fix for Fixed Navbar jumping on scroll --*/
13.fixed-top  {
14 -webkit-backface-visibility: hidden;
15}
16
17/*--- Fixed Landing Page Section --*/
18.landing {
19  position: relative;
20  width: 100%;
21  height: 100vh;
22  display: table;
23  z-index: -1;
24}
25.home-wrap {
26  clip: rect(0, auto, auto, 0);
27  position: absolute;
28  top: 0;
29  left: 0;
30  width: 100%;
31  height: 100%;
32}
33.home-inner {
34  position: fixed;
35  display: table;
36  top: 0;
37  left: 0;
38  width: 100%;
39  height: 100%;
40  background-size: cover;
41  background-position: center center;
42  -webkit-transform: translateZ(0);
43          transform: translateZ(0);
44  will-change: transform;
45}
46
47/*--- iOS Fixed Background Image --*/
48.fixed-background {
49  position: relative;
50  width: 100%;
51}
52.fixed-wrap {
53  clip: rect(0, auto, auto, 0);
54  position: absolute;
55  top: 0;
56  left: 0;
57  width: 100%;
58  height: 100%;
59  z-index: -999!important;
60}
61.fixed {
62  position: fixed;
63  display: block;
64  top: 0;
65  left: 0;
66  width: 100%;
67  height: 100%;
68  background-size: cover;
69  background-position: center center;
70  -webkit-transform: translateZ(0);
71          transform: translateZ(0);
72  will-change: transform;
73}

試したこと

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

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

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

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

m.ts10806

2019/03/20 07:33

style.css、fixed.cssの内容もご提示ください。

ZhvKe5P4HEDEyw

2019/03/20 07:54

fixed.cssは見当たらないので。style.cssを追加いたしました。よろしくお願いします。

m.ts10806

2019/03/20 07:56

コードブロックはファイル毎にわけていただけますか？再現確認の際にコピペからCSSコード部分を抜き出さないといけなくなります。 >fixed.cssは見当たらないのででもHTMLで読み込まれてますよね。 <link rel="stylesheet" href="css/fixed.css"> もし使っていないのでしたらコードから削除されては。存在しないファイルはデベロッパツール上ではエラーとなるので。

ZhvKe5P4HEDEyw

2019/03/20 08:16

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

m.ts10806

2019/03/20 08:21

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

ZhvKe5P4HEDEyw

2019/03/20 08:25

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