Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme d overflow scrolling

bibiroro939
  • HTML / CSS
    2 janvier 2018 à 18:52:22

    Bonsoir,

    je me rends compte que l'overflowscrolling n'a plus d effet classique sur mobile (defilement avec l inertie).

    Par ailleurs le fait de toucher l'heure sur iPhone ( qui classiquement fait remonter automatiquement en haut de page) ne fonctionne plus non plus.

    Je n'ai aucune idée de quel changement à pu provoquer cela malgré de longues recherches..

    voici un exemple de page web :

    <!DOCTYPE html>
<html lang="fr">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>site.com</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />

    <!-- Custom styles for this template -->
    <link href="css/creative.min.css" rel="stylesheet">
    <link rel="stylesheet" href="Swiper-4.0.6/dist/css/swiper.min.css">

  </head>

  <style>

  .i{
    color: white; font-size:
    1.6em;border: 1px solid white;
    width: 1.6em;text-align: center;
    line-height: 1.6em;
    color: #fff;
    margin-top: 55%;
    border-radius: 0.8em;
  }

  .i:hover{
    border: 1px solid #007aff;
    color: #007aff;
  }
  </style>

  <body>

    <!-- Navigation -->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-primary" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="index.php">index</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">
        <li class="nav-item">
          <a class="btn nav-link js-scroll-trigger" href="#CommentCaMarche">Comment ça marche ?</a>
        </li>
        <li class="nav-item">
          <a class="btn nav-link js-scroll-trigger" href="showroom.php">Showroom</a>
        </li>
        <li class="nav-item">
          <a class="btn nav-link js-scroll-trigger" href="ventes_privees.php">Ventes Privées</a>
        </li>
        <li class="nav-item">
          <a class="btn btn-default nav-link js-scroll-trigger" onclick="log();" style="background-color: #007bff; margin-right: 3px;margin-bottom: 2px;">Nous appeler</a>
        </li>
        <li class="nav-item">
          <a class="btn btn-default nav-link js-scroll-trigger bg-danger" style="color: white;margin-bottom: 2px;" href="showroom.php">Louer</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

    
    <header class="masthead text-center text-white d-flex" style="height: 100%; border-bottom: 2px solid #007aff;">
      <div class="container my-auto">
        <div class="row">
          <div class="col-lg-10 mx-auto">

            <a href="#CommentCaMarche"><i class="fa fa-angle-double-down fa-2x i" aria-hidden="true"></i></a>

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


<section id="vehicules" class="p-0"  style="width: 100%;">
</section>

<section id="services" style="background-color: rgba(1, 18, 42, 0.89); border-top: 2px solid #007aff;border-bottom: 2px solid #007aff;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-white">Pourquoi louer chez XXX ?</h2>
        <hr class="primary" style="border-color: white;">
      </div>
    </div>
  </div>
  <div class="container text-center">
    <!-- 1 -->
    <div class="row">
      <div class="col-lg-4 col-md-6 text-center">
        <i class="fa fa-4x fa-handshake-o sr-icons" style="color: #007aff; margin-bottom: 12%;"></i>
          <h3 class="text-white">Flexibilité</h3>
          <p class="text-white">Louer la voiture de votre choix sans contraintes, sans apport et sans entretiens à effectuer.</p>
      </div>
      <div class="col-lg-4 col-md-6 text-center">
        <i class="fa fa-4x fa-sliders sr-icons" style="color: #007aff; margin-bottom: 12%;"></i>
          <h3 class="text-white">Large choix</h3>
          <p class="text-white">Accédez à une gamme diverses et variés de véhicules de qualités.</p>
      </div>
      <div class="col-lg-4 col-md-6 text-center">
        <i class="fa fa-4x fa-diamond sr-icons" style="color: #007aff; margin-bottom: 12%;"></i>
          <h3 class="text-white">Qualité</h3>
          <p class="text-white">Les véhicules proposés par nos concessions ont été sélectionnés pour vous.</p>
      </div>
    </div>
    <!-- 1 -->
    <!-- 2 -->
    <div class="row">
      <div class="col-lg-6 col-md-6 text-center">
        <i class="fa fa-4x fa-shield sr-icons" style="color: #007aff; margin-bottom: 12%;"></i>
          <h3 class="text-white">Sécurité</h3>
          <p class="text-white">Le paiement de votre location est sécurisé et la réception du véhicule garantie dans les meilleures conditions.</p>
      </div>
      <div class="col-lg-6 col-md-6 text-center">

        <i class="fa fa-4x fa-flag-checkered sr-icons" style="color: #007aff; margin-bottom: 12%;"></i>
          <h3 class="text-white">Facile</h3>
          <p class="text-white">Toute les démarches se font en ligne et en quelques clics, puis il suffit de récupérez votre véhicule en concession.</p>
      </div>

    </div>
    <!-- 2 -->

  </div>
  <center>
    <div style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4%; margin-bottom: -3%;">
    <div style="margin-right: 3px;"><a href="faq.php" class="btn" style="color: white; border: 1px solid white;">Plus d'informations</a></div>
    <div><a onclick="log();" class="btn" style="color: white; border: 1px solid white;">Nous appeler</a></div>
  </div>
  </center>
</section>


    <section id="CommentCaMarche" style="background-color: rgba(1, 18, 42, 0.89);border-bottom: 2px solid #007aff;">
     <div class="col-lg-12 text-center text-white">
      <h2 class="section-heading">Comment ça marche ?</h2>
      <hr class="primary" style="border-color: white;">
    </div>
      <div class="container text-center">
        <div class="row">
          <div class="col-lg-4 col-md-6 text-center">
            <div class="service-box">
              <i class="fa fa-2x aboutus fa-calendar sr-icons" style="color: #007aff;"></i>
              <h4 class="text-white">1</h4>
              <h3 class="text-white">Choisissez votre véhicule et une période de location</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 text-center">

            <div class="service-box">
              <i class="fa fa-2x aboutus fa-credit-card-alt sr-icons" style="color: #007aff;"></i>
              <h4 class="text-white">2</h4>
              <h3 class="text-white">Réservez et payez en ligne</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 text-center">
            <div class="service-box">
              <i class="fa fa-2x aboutus fa-car sr-icons" style="color: #007aff;"></i>
              <h4 class="text-white">3</h4>
              <h3 class="text-white">Récupérez votre voiture chez le concessionnaire</h3>
            </div>
          </div>
        </div>
      </div>

      <center>
        <div style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4%; margin-bottom: -3%;">
        <div style="margin-right: 3px;"><a href="faq.php" class="btn" style="color: white; border: 1px solid white;">Des questions ?</a></div>
      </div>
      </center>
    </section>

<section style="border-bottom: 2px solid #007aff;">
    <div class="swiper-container" class="bg-primary" style="margin-top: 4.3%;">
      <div class="swiper-wrapper"><div class="swiper-slide text-center" style="min-width: 95%;"><h2 class="#475B6F;">“ Avis n°1 C'est génial “</h2><span>Michel Dupont</span></div><div class="swiper-slide text-center" style="min-width: 95%;"><h2 class="#475B6F;">“ Avis n°2 C'est super cool “</h2><span>François Bernard</span></div><div class="swiper-slide text-center" style="min-width: 95%;"><h2 class="#475B6F;">“ dernier test “</h2><span>dernier test dernier test</span></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </section>


<div id="footer" class="call-to-action bg-primary" style="display: flex;">

  <div class="container text-center" style="display: flex;flex-direction: column;justify-content: center;width: 16.6%; height: 100%; border-right: 1px solid white;">
    <div>
      <i class="fa fa-facebook-square" style="color: white;font-size: 36px;padding-right: 7px;"></i>
      <i class="fa fa-instagram" style="color: white;font-size: 36px;"></i>
    </div> <!-- Réseaux sociaux -->
    <div><i class="text-white">Réseaux Sociaux</i></div>
  </div>

  <div class="container text-center" style="display: flex;flex-wrap: wrap;justify-content: center;width: 16.6%; height: 100%; border-right: 1px solid white;flex-direction: column;">
    <a href="apropos.php">
    <i class="fa fa-info-circle" style="color: white;font-size: 36px;"></i> <!-- a propos -->
    <div><i class="text-white">À propos</i></div>
    </a>
  </div>

  <div class="container text-center" style="display: flex;flex-wrap: wrap;justify-content: center;width: 16.6%; height: 100%; border-right: 1px solid white;flex-direction: column;">
    <a href="cgu.php">
    <i class="fa fa-book" style="color: white;font-size: 36px;"></i> <!-- CGU  -->
    <div><i class="text-white">C.G.L</i></div></a>
  </div>

  <div class="container text-center" style="display: flex;flex-wrap: wrap;justify-content: center;width: 16.6%; height: 100%; border-right: 1px solid white;flex-direction: column;">
    <a href="faq.php"><i class="fa fa-question-circle" style="color: white;font-size: 36px;"></i> <!-- FAQ  -->
    <div><i class="text-white">F.A.Q</i></div></a>
  </div>

  <div class="container text-center" style="display: flex;flex-wrap: wrap;justify-content: center;width: 16.6%; height: 100%; border-right: 1px solid white;flex-direction: column;">
    <a href="blog.php"><i class="fa fa-rss-square" style="color: white;font-size: 36px;"></i> <!-- Blog  -->
    <div><i class="text-white">Le blog</i></div></a>
  </div>

  <div class="container text-center" style="display: flex;flex-wrap: wrap;justify-content: center;width: 16.6%; height: 100%;flex-direction: column;">
    <a class="js-scroll-trigger" href="/pages/connexion.php"><i class="fa fa-user" style="color: white;font-size: 36px;"></i> <!-- Connexion  -->
    <div><i class="text-white">Connexion</i></div></a>
  </div>

</div>

<script src="sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert/dist/sweetalert.css">

<script>
function log() {
  swal(
'XXXXXXXXXXX',
'Appelez nous pour plus d\'informations ! (Appel non surtaxé)',
'info'
)
}
</script>

<script>
var largeur = screen.width;
alert(largeur);
if (largeur < 750) {
  alert('effacer !');
  document.getElementById('footer').style.display = 'none';
}
</script>

    <script>
    function getXMLHttpRequest() {
      var xhr = null;

      if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
          try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
        } else {
          xhr = new XMLHttpRequest();
        }
      } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
      }

      return xhr;
    }

    function load(callback) {

    /*  var marque_selected = document.getElementById("marque_selected").selectedIndex;
      var marque_selected_value = document.getElementById("marque_selected").options;
      var resultat = marque_selected_value[marque_selected_selected].text;
      document.getElementById('dernier_selectionne').value = compte_selected_value[compte_selected].text;

      var value = "&marque="+ marque + "&localisation=" + localisation;*/

      var action = '0';

      var xhr = getXMLHttpRequest();

      xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
          callback(xhr.responseText);
        }
      };

      var marque = 'Marque';
      var localisation = 'Localisation';

      xhr.open("GET", "ajax/echo_vehicules.php?"+ "&marque="+ marque + "&localisation=" + localisation + "&action=" + action , true);
      xhr.send(null);


    }

    function load_custom(callback) {

      var marque_selected = document.getElementById('marque_selected').selectedIndex;
      var marque_selected_value = document.getElementById('marque_selected').options;
      var marque = marque_selected_value[marque_selected].text;

      var localisation_selected = document.getElementById('localisation_selected').selectedIndex;
      var localisation_selected_value = document.getElementById('localisation_selected').options;
      var localisation = localisation_selected_value[localisation_selected].text;

      var action = '1';

      var value = "&marque="+ marque + "&localisation=" + localisation + "&action="+ action;

      var xhr = getXMLHttpRequest();

      xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
          callback(xhr.responseText);
        }
      };

      xhr.open("GET", "/ajax/echo_vehicules.php?" + value, true);
      xhr.send(null);


    }

    function readData(sData) {
        if (sData == "") {
            alert("Erreur de transmission des données - Réessayer ");
        }
        else {
            document.getElementById('vehicules').innerHTML = "";
            $('#vehicules').prepend(sData);

        }
    }

    load(readData);
    </script>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="admin/pages/bootstrap-select/bootstrap-select.min.css">
    <script src="admin/pages/bootstrap-select/bootstrap-select.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="vendor/scrollreveal/scrollreveal.min.js"></script>
    <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Swiper JS -->

    <script src="Swiper-4.0.6/dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });

    </script>

    <!-- Main JS (Do not remove) -->
    <script src="sweetalert/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="sweetalert/dist/sweetalert.css">

    <script>
    function log() {
      swal(
  'XXXXXXXXXX',
  'Appelez nous pour plus d\'informations ! (Appel non surtaxé)',
  'info'
)
}
    </script>

    <!-- Custom scripts for this template -->
    <script src="js/creative.js"></script>

  </body>

</html>



    • Partager sur Facebook
    • Partager sur Twitter

    Probleme d overflow scrolling

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown