ページのスクロール。 ### 発生している問題・エラーメッセージ 画面のスクロールができない。 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です。
回答1件
あなたの回答
tips
プレビュー