[HTML] Problema con scroll bar (risolto)

tomorc

Nuovo Utente
17 Nov 2019
1
0
1
Buongiorno,

Ho un grande problema...

In pratica ho inserito un video backround responsive, fin qua tutto bene solo che provando ad inserire

nuovi elementi nella home page, la scroll bar non scorre e rimane bloccata nel div del video.

Vi prego potreste aiutarmi?

Grazie

HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="index.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>morelli</title>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

</head>

<body>

<!-- header -->
    
<header>
    
<nav>
    <div class="menu-icon" onClick="myfunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div class="logo">
        LOGO
    </div>
    <div class="menu">
        <ul>
            <li class="active"><a href="#"></a></li>
            <li><a style="text-decoration: none" href="#"></a></li>
            <li><a style="text-decoration: none" href="#"></a></li>
            <li><a style="text-decoration: none" href="#"></a></li>
            <li><a style="text-decoration: none" href="#"></a></li>
        </ul>
    </div>

</nav>
    
<!-- video -->
    
<div class="full-video">
    <video id="video" autoplay loop muted>
        <source src="../foto/video" type="video/mp4" />
    </video>
    <div class="full-video-content">
    <div class="content">
        <div class="slider-wrapper">
          prova
          <div class="slider">
              <div class="slider-text1">testo1'</div>
              <div class="slider-text2">testo2</div>
              <div class="slider-text3">testo3</div>
          </div>
        </div>       
      </div>
        
        
    </div>
    
</div>
    

</header>


<!-- main -->   
        
    <main>
    <div class="container">
        <div class="box">
            <div class="imgbox">
                <img src="../foto/Grand_Teton_National_Park_sunset_clouds_evening_mountains_field_flowers_herbs_woods_trees_pine_trees_4579x3057.jpg">
            </div>
            <div class="contentpt">
                <h3>POST TITLE</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatibus, debitis facilis nulla dicta quibusdam, culpa? Hic laboriosam saepe sint corporis quibusdam iure rerum ducimus. Rerum nesciunt minus impedit a.</p>
            </div>
        </div>
    </div>
</main>


Codice:
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins');

html, body {
    margin: 0;
    padding: 0;
    overflow-x:hidden;
}

.full-video{
    position: static;
    height: 100vh;
    widows: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.full-video video {
    z-index: -100;
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* slider text */

.content {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 40px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
  background: lightgreen;
  animation: slide 5s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text3 {
  background: lightcoral;
}
@keyframes slide {
  0% {margin-top:-300px;}
  5% {margin-top:-200px;}
  33% {margin-top:-200px;}
  38% {margin-top:-100px;}
  66% {margin-top:-100px;}
  71% {margin-top:0px;}
  100% {margin-top:0px;}
}

@media (max-width: 779px){
    .slider{
        font-size: 20px;
        height: 30px;
    }
    .slider-wrapper{
        font-size: 20px;
    }
}


@media (min-width: 780px){
    .slider{
        font-size: 40px;
        height: 50px;
    }
    .slider-wrapper{
        font-size: 50px;
    }
}


/* navbar */

.logo{
    position: absolute;
    float: left;
    padding: 16px;
    color: #fff;
    font-weight:bold;
    font-size: 3vw;
    text-decoration: none;
}

nav{
    position: fixed;
    width: 100%;
    z-index: 100;
    opacity: 75%;
    text-decoration:none;
}

nav ul {
    list-style: none;
    background: rgba(4,0,0,1.00);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    transition: 1s;
    text-decoration: none;
    
}

nav.black ul{
    background: #000;
    text-decoration: none;
}
 
nav ul li {
    display: inline-block;
    padding: 16px ;
    text-decoration: none;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 2.5vw;
}

ul li a{
    text-decoration: none;
    border: 2px solid transparent;
    transition: 0.6s;
}

ul li a:hover{
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

ul li.active a{
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

.menu-icon {
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
    text-decoration: none;
}

.bar1,.bar2,.bar3{
    width: 35px;
    height: 5px;
    background-color: #333;
    margin-top: 6px;
    margin-right: 2%;
    margin-left: 95%;
    margin-bottom: 6px;
    transition: 0.4s ease;
}

.change .bar1{
    transform: rotate(-45deg) translate(-9px,6px);
}
.change .bar3{
    transform: rotate(45deg) translate(-9px,-8px);
}
.change .bar2{
    opacity: 0;
}

@media(max-width: 580px){
    .logo {
        position: fixed;
        top: 0;
        padding: 3px 60px 140px 3px;
        z-index: 1;
    }
    
    nav ul {
        max-height: 0px;
        background: #000;
        text-decoration: none;
    }
    
    nav.black ul {
        background: #000;
        text-decoration: none;
    }
    
    .showing {
        max-height: 21em;
    }
    
    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 16px 0;
        text-align: center;
        text-decoration: none;
    }
    
    .logo{
    position: fixed;
    float: left;
    margin: 14px 36px;
    color: #fff;
    font-weight:bold;
    font-size: 28px;
}
    
    nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 5vw;
}
    .menu-icon {
        display: block;
    }
}



Cosa ho sbagliato??

Grazie a tutti.