Блог

Главная - Вопросы по программированию - Предотвращение фоновой прокрутки с помощью перетаскивания на планшете или мобильном устройстве

Предотвращение фоновой прокрутки с помощью перетаскивания на планшете или мобильном устройстве

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Я ищу решение для предотвращения перемещения фона в Safari. Я пытаюсь добавить touch-action: none !important; в файл CSS. кроме того, я пытаюсь pointer-events: none; . проблема решена в Chrome. но в firefox и Safari все еще можно перетаскивать фон. Я следующий, вы видите мой код:

 .img {
    background: url("https://dummyimage.com/1920x1080/000/fff") no-repeat center center scroll;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
    overflow: hidden !important;
    touch-action: none !important;
  height: 100%;
  background-attachment: fixed;
pointer-events:none;
  }
  
  html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
  font-family: 'Source Sans Pro';
  font-weight: 300;
} 
 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>


<div class="img"></div>
    
   
<nav style="opacity: 1;" class="navbar fixed-bottom navbar-expand-sm navbar-light bg-danger justify-content-sm-center"><center>
                    <h1 class="my-2 pt-2 text-light">Coming Soon!</h1>
              </center>
            </nav>


 



    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

когда вы открываете страницу результатов на планшете или Safari на мобильном устройстве, пока вы проводите пальцем вверх и вниз, панель навигации остается неподвижной, но фоновое изображение перемещается. Я ищу решение для исправления этого фона на планшете и мобильном устройстве. Пожалуйста, дайте мне несколько советов.

Комментарии:

1. Вы пробовали этот CSS для body элемента: background-attachment:fixed; ?

2. Нет! тем не менее, у меня та же проблема. раздел навигации остается фиксированным, поскольку я использую фиксированное дно, но фоновое изображение все еще движется.

Метки: