Safari не мешает прокрутке - PullRequest
Новая
       33

Safari не мешает прокрутке

0 голосов
/ 12 октября 2018

Вот чрезвычайно простая HTML-страница. 

<body style="overflow-y: hidden">
  ...
</body>

Ожидаемое поведение этой страницы: прокрутка документа запрещена из-за overflow-y: hidden.

. Работает должным образом (прокруткане допускается) везде, кроме Safari.

Демонстрационная версия: https://spotted -chime.glitch.me /

Вопрос: как заставить Safari вести себя так же, как другие браузеры?

Ответы [ 4 ]

0 голосов
/ 21 октября 2018

На самом деле, это недостаток команды Safari, но для решения вашей проблемы вы можете использовать JavaScript решение:

Для настольных браузеров вы можете использовать overflow: hidden, но для iOS Safari вы должны сначалаобнаружить его, затем использовать функцию JavaScript для предотвращения прокрутки: 

const preventDefault = (e) => {
  e = e || window.event;
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.returnValue = false;  
}

const preventScrollingSafari = () => {
  const ua = navigator.userAgent.toLowerCase(); 
  if (ua.indexOf('safari') != -1 && ua.indexOf('chrome') <= -1) {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onwheel = preventDefault;
    window.onmousewheel = document.onmousewheel = preventDefault;
    window.ontouchmove  = preventDefault;
  }
};

и функцию для ее повторного включения: 

const enableScrollingSafari = () => {
  const ua = navigator.userAgent.toLowerCase(); 
  if (ua.indexOf('safari') != -1 && ua.indexOf('chrome') <= -1) {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;
  }
};

Вы можете использовать вышеуказанные функции в своих действиях.

0 голосов
/ 20 октября 2018

Попробуйте это: 

  <head>
    <style>
       .forSafari::-webkit-scrollbar { width: 0 !important }
    </style>
   </head>
   <body style="overflow-y: hidden" class="forSafari">
         ...
  </body>
0 голосов
/ 21 октября 2018

Просто используйте overflow: hidden, и оно будет работать.

В качестве альтернативы, вы можете попробовать использовать position: fixed для тега <body>.

(ПРИМЕЧАНИЕ. При использовании этого подхода body будет прокручиваться вверх, как по умолчанию top: 0.)

РЕДАКТИРОВАТЬ: для мобильных устройств safari вам необходимо использовать события Javascript,Объясняется в этом ответе.

https://stackoverflow.com/a/4770179/2860486

0 голосов
/ 15 октября 2018

Позиция фиксированного положения предназначена для создания элемента div, который остается в той же позиции на экране, а содержимое позади него прокручивается вниз.

fixed

Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места.Он позиционируется относительно исходного содержащего блока, установленного в области просмотра, за исключением случаев, когда один из его предков имеет свойство transform, перспектива или фильтр, для которого установлено значение, отличное от none (см. Спецификацию CSS-преобразований), в этом случае этот предок ведет себя каксодержащий блок.(Обратите внимание, что существуют несоответствия браузера с перспективой и фильтром, способствующие формированию блока.) Его конечная позиция определяется значениями top, right, bottom и left.

Это значение всегда создает новый контекст стека.В печатных документах элемент размещается в одной и той же позиции на каждой странице.

Вы пытались изменить его на абсолютный? 

body {
  overflow-y: hidden;
}

#backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .2);
  border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

  </head>  
  <body>
    <div id="backdrop">
      
    </div>  
    <div>0%</div>
    <div>1%</div>
    <div>2%</div>
    <div>3%</div>
    <div>4%</div>
    <div>5%</div>
    <div>6%</div>
    <div>7%</div>
    <div>8%</div>
    <div>9%</div>
    <div>10%</div>
    <div>11%</div>
    <div>12%</div>
    <div>13%</div>
    <div>14%</div>
    <div>15%</div>
    <div>16%</div>
    <div>17%</div>
    <div>18%</div>
    <div>19%</div>
    <div>20%</div>
    <div>21%</div>
    <div>22%</div>
    <div>23%</div>
    <div>24%</div>
    <div>25%</div>
    <div>26%</div>
    <div>27%</div>
    <div>28%</div>
    <div>29%</div>
    <div>30%</div>
    <div>31%</div>
    <div>32%</div>
    <div>33%</div>
    <div>34%</div>
    <div>35%</div>
    <div>36%</div>
    <div>37%</div>
    <div>38%</div>
    <div>39%</div>
    <div>40%</div>
    <div>41%</div>
    <div>42%</div>
    <div>43%</div>
    <div>44%</div>
    <div>45%</div>
    <div>46%</div>
    <div>47%</div>
    <div>48%</div>
    <div>49%</div>
    <div>50%</div>
    <div>51%</div>
    <div>52%</div>
    <div>53%</div>
    <div>54%</div>
    <div>55%</div>
    <div>56%</div>
    <div>57%</div>
    <div>58%</div>
    <div>59%</div>
    <div>60%</div>
    <div>61%</div>
    <div>62%</div>
    <div>63%</div>
    <div>64%</div>
    <div>65%</div>
    <div>66%</div>
    <div>67%</div>
    <div>68%</div>
    <div>69%</div>
    <div>70%</div>
    <div>71%</div>
    <div>72%</div>
    <div>73%</div>
    <div>74%</div>
    <div>75%</div>
    <div>76%</div>
    <div>77%</div>
    <div>78%</div>
    <div>79%</div>
    <div>80%</div>
    <div>81%</div>
    <div>82%</div>
    <div>83%</div>
    <div>84%</div>
    <div>85%</div>
    <div>86%</div>
    <div>87%</div>
    <div>88%</div>
    <div>89%</div>
    <div>90%</div>
    <div>91%</div>
    <div>92%</div>
    <div>93%</div>
    <div>94%</div>
    <div>95%</div>
    <div>96%</div>
    <div>97%</div>
    <div>98%</div>
    <div>99%</div>
    <div>100%</div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>
...