Горизонтальная полоса прокрутки непреднамеренного переполнения тела - PullRequest
Новая
       50

Горизонтальная полоса прокрутки непреднамеренного переполнения тела

0 голосов
/ 07 ноября 2019

Я потратил много часов, пытаясь решить эту проблему, но безуспешно.

Когда я уменьшаю разрешение, появляется горизонтальная полоса прокрутки, и я не могу найти какой-либо элемент из коробки, вызывающий эту проблему.

Я использую тему начальной загрузки, и я вставил некоторый код CSS в эту тему начальной загрузки, я также заменил некоторые разделы своими собственными.

Когда я удаляю все узлы, кроме нижнего колонтитулаУ меня нет проблемы с горизонтальной полосой прокрутки, поэтому я считаю, что сделал более 1 ошибки. Я также попытался иметь 1 раздел в то время, и проблема все еще сохраняется. Сейчас у меня нет выбора, действительно нужна помощь, чтобы решить эту проблему, которая удерживает меня.

You can check it here https://jsfiddle.net/28rxv53a/

Изображения не будут работать, потому что я использую Jekyll, и они указывают на мою GH-страницу.

overflow-x: скрытый не является решением моей проблемы.

EDITED

HTML 

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/LazPap/assets/css/custom.css">
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>LazPap - Portfolio</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

    <!-- Font Awesome Icons -->
    <link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Secular+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600&display=swap" rel="stylesheet">

    <!-- Plugin CSS -->
    <link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">

    <!-- Theme CSS - Includes Bootstrap -->
    <link href="https://blackrockdigital.github.io/startbootstrap-creative/css/creative.min.css" rel="stylesheet">
    <!-- Fade-in and Fade-out Plugin -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- Modaal Plugin for contact link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css"/>

  </head>
  <body id="page-top">
    <header class="masthead-background">
  <div class="container h-100">
    <div class="row h-100 align-items-center justify-content-center text-center">
      <div class="col-12">
        <div class="parallax-window"><h1 class="background-text" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">LazPap</h1></div>
        <div id="scene">
          <div class="layer parallax-window" data-depth="0.5" data-parallax="scroll" data-image-src="HTML_5.png">
            <img src="/LazPap/images/HTML_5.png" class="background-image-left" />
          </div>
          <div class="layer" data-depth="-0.5">
            <img src="/LazPap/images/CSS_3.png" class="background-image-right" />
          </div>
          <div class="layer" data-depth="0.5">
            <img src="/LazPap/images/Javascript.png" class="background-image-under" />
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<section class="page-section masthead-under-background">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 text-center mx-auto">
          <h2 class="text-white mt-0 line-height text-heading" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">This project designed with Ruby on Rails</h2>
          <hr class="divider light my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="650" />
          <p class="text-white mb-5 text-sub" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">For this Rails app project have used a variety of Rails Gems and Javascript - jQuery Libraries and differnt CSS animations.</p>
            <div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000">
              <img src="/LazPap/images/Ruby_On_Rails.png" class="icon-ruby" />
            </div>
        </div>
      </div>
    </div>
  </section>

<p><!-- About Section --></p>
<section class="page-section" id="work">
    <div class="container">
      <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h1 class="work-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">My Wordpress Work</h1>
      </div>
        <div class="col-lg-10 text-center container-grid">
          <div data-aos="fade-right" data-aos-duration="1000" data-aos-delay="800">
            <div class="box">
              <div class="content">
                <h2>01</h2>
                <h3>Bazagiazi</h3>
                <a href="https://bazagiazi.com/">Visit</a>
              </div>
            </div>
          </div>
          <div data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">
            <div class="box">
              <div class="content">
                <h2>02</h2>
                <h3>Empty</h3>
                <a href="#work">Stay Here</a>
              </div>
            </div>
          </div>
          <div data-aos="fade-left" data-aos-duration="1000" data-aos-delay="1000">
            <div class="box">
              <div class="content">
                <h2>03</h2>
                <h3>Empty</h3>
                <a href="#work">Stay Here</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<p><!-- Contact Section --></p>
<section class="page-section" id="contact">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
          <h1 class="mt-0 text-heading purple-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">Let's Get In Touch!</h1>
          <hr class="divider my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" />
          <p class="text-muted mb-5 text-sub" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-delay="800">Feel free to contact me for any questions I'll glad to answer you as soon as i can!</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 ml-auto text-center mb-5 mb-lg-0">
          <i class="fas fa-envelope fa-3x mb-3 text-muted" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000"></i>
          <a class="d-block text-sub" href="mailto:lazospap3@gmail.com" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">lazospap3@gmail.com</a>
        </div>
      </div>
    </div>
    <button id="btnScrollToTop" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
      <i class="material-icons">arrow_upward</i>
    </button>
  </section>

<script type="text/javascript">
    const btnScrollToTop = document.getElementById("btnScrollToTop");
    btnScrollToTop.addEventListener("click", function() {
      $("html, body").animate({scrollTop: 0}, "slow");
    });
  </script>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<p><!--Heading Text translateY movement-->
  <script type="text/javascript" defer="">
    $(window).scroll(function() {
      var scrollval = $(this).scrollTop();
      $(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
    });
  </script></p>

<script defer="">
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);
  </script>

<script defer="">
    AOS.init();
  </script>


      <!--Modaal script -->
      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
        <div class="container">
          <a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="/LazPap/images/Logo.png " class="logo-image"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto my-2 my-lg-0">
              <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#work">Work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link js-scroll-trigger modaal" data-modaal-type="inline" data-modaal-animation="fade" href="#inline" data-modaal-height="500">Contact</a>
                <div id="inline" style="display:none;">
                    <h2 class="modaal-heading">Contact Me</h2>
                    <h1 class="modaal-heading"><a class="d-block" href="mailto:lazospap3@gmail.com">lazospap3@gmail.com</a></h1>
                    </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
      <script type="text/javascript">
        $(".inline").modaal();
      </script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
      <script>
        $("body").niceScroll({
          cursorcolor:"#fb6542",
          cursorwidth:"12",
          cursorborder: "none",
          cursorborderradius: 4,
          scrollspeed: 10,
        });
      </script>
    <footer class="bg-light py-5">
      <div class="container">
        <div class="small text-center text-muted text-sub">Copyright &copy; 2019 - LazPap</div>
      </div>
    </footer>
    <!-- Bootstrap core JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
    <script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
    <!--CDN for Scroll opacity -->
     <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
     <script type="text/javascript" defer>
       $(document).ready(function(){
         $(window).scroll(function(){
           if($(this).scrollTop() > 150) {
             $(".background-image-left").css({"opacity" : "0"})
             $(".background-image-right").css({"opacity" : "0"})
             $(".background-image-under").css({"opacity" : "0"})
             $(".background-text").css({"opacity" : "0"})
             $("#btnScrollToTop").css({"opacity" : "1"})
           }
           else {
             $(".background-image-left").css({"opacity" : "1"})
             $(".background-image-right").css({"opacity" : "1"})
             $(".background-image-under").css({"opacity" : "1"})
             $(".background-text").css({"opacity" : "1"})
             $("#btnScrollToTop").css({"opacity" : "0"})
           }
         })
       })
     </script>
     <!--Heading Text translateY movement-->
     <script type="text/javascript" defer>
       $(window).scroll(function() {
         var scrollval = $(this).scrollTop();
         $(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
       });
     </script>

     <script defer>
       var scene = document.getElementById('scene');
       var parallax = new Parallax(scene);
     </script>

     <script defer>
       AOS.init();
     </script>
  </body>
</html>

CSS 

#btnScrollToTop{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e62739;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  outline: none;
  cursor: pointer;
  border: none;
}
#btnScrollToTop:active{
  background: #cc2333;
}
.purple-text {
  color: #5a19b5;
}
.container-grid {
  display: grid;
  grid-template-columns: 1;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 0 40px;
  grid-template-rows: auto;
}
.container-grid .box {
  display: flex;
  height: 400px;
  background: #060c21;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}
.container-grid .box:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #fff;
  transform: skew(2deg,2deg);
  z-index: -1;
}
.container-grid .box:nth-child(1):before {
    background: linear-gradient(315deg, #ff0057, #e64a19);
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.container-grid .box:nth-child(2):before {
    background: linear-gradient(315deg, #89ff00, #00bcd4);
}
.container-grid .box:nth-child(3):before {
    background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container-grid .box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.content {
  position: relative;
  padding: 20px;
  transform: translateY(40px);
}
.box .content h2 {
  position: absolute;
  top: -140px;
  margin: 0;
  padding: 0;
  font-size: 10em;
  color: rgba(255,255,255,.05);
  transition: 0.5s;
}
.box:hover .content h2 {
  top: -210px;
}
.box .content h3 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 34px;
  font-weight: 500;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}
.box .content a {
  position: relative;
  margin: 20px 0 0;
  padding: 10px 20px;
  border: 1px solid #fff;
  display: inline-block;
  color: #fff;
  transition: 0.5s;
  transform: translateY(-40px);
  opacity: 0;
  visibility: hidden;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}
.box:hover .content a {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}
.box .content a:hover {
  color: #000;
  background: #fff;
}
.work-text {
  font-family: "Montserrat", sans-serif;
  color: #5a19b5;
  margin-bottom: 50px;
}
.bg-work {
  background-color: #e7eeed;
}
.modaal-heading {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 115px;
}
.text-sub{
  font-family: 'Montserrat', sans-serif;
}
.text-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
}
.background-text {
    text-align: center;
    left: 20%;
    position: absolute;
    font-family: 'Secular One', sans-serif;
    color: #fff55a;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    font-size: 90px;
}
 .logo-image {
     top: 0px;
     left: 0px;
 }
 .masthead-background {
   height: 100vh;
   min-height: 500px;
   background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
 }
.masthead-under-background {
  height: 100vh;
  min-height: 500px;
  background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
 .background-image-left {
   position: relative;
   top: 50%;
   left: 10%;
   transition: .8s;
   -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
   height: auto;
 }

 .background-image-right {
   top: 50%;
   left: 700px;
   position: relative;
   transition: .8s;
   -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
   height: auto;
 }
 .background-image-under {
    position: relative;
    top: 150px;
    left: 450px;
    transition: .8s;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    height: auto;
 }
.icon-ruby {
  position:relative;
  transition: transform 1s;
  -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.icon-ruby:hover {
  transform: scale(1.2);
}
.line-height {
  line-height: 2;
}

@media (min-width: 320px) and (max-width: 480px) {
  .icon-ruby{width: 60%;}
}
@media (min-width: 320px) and (max-width: 480px) {
  .background-image-left{width: 30%;}
}
@media (min-width: 320px) and (max-width: 480px) {
  .background-image-under {
    width: 50%;
    left: 100px;
    top: 100px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .background-image-right {
    width: 48%;
    left: 250px;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .background-image-left {
    width: 22%;
    left: 10px;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .background-image-under {
    width: 60%;
    left: 250px;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
  .background-image-right {
    width: 50%;
    left: 400px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .background-image-left {
    width: 20%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .background-image-under {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .background-image-right {
    width: 70%;
    left: 500px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .background-text {
    left: 10px;
  }
@media (min-width: 576px) {
  .background-text {
    font-size: 100px;
  }
}
@media (min-width: 768px) {
  .background-text {
    font-size: 150px;
  }
}
@media (min-width: 992px) {
  .background-text {
    font-size: 180px;
  }
}
@media (min-width: 1200px) {
  .background-text {
    font-size: 220px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .modaal-heading{
    font-size:7vw;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...