Запретить фоновый прокрутка за фиксированным Div в Mobile Safari? [Дубликат]

Question

Запретить фоновый прокрутка за фиксированным Div в Mobile Safari? [Дубликат]

Еще один подход к возврату значения из асинхронной функции - передать объект, который сохранит результат от асинхронной функции.

Вот пример того же:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

Я использую объект result для хранения значения во время асинхронной операции. Это позволяет получить результат даже после асинхронного задания.

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

101

javascript jquery css mobile mobile-safari

задан Sergey Glotov 29 March 2013 в 15:01

16 ответов

Не держите видовое окно нетронутым: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Предполагая, что вы хотите добиться эффекта непрерывной черной полосы справа: #menubar не должно превышать 100%, отрегулируйте радиус границы таким образом, чтобы правая сторона была квадратной и отрегулировала прокладку так, чтобы она простиралась немного правее. Измените следующее на #menubar:

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

. Коррекция padding до 10px, конечно, оставляет левое меню на краю панели, вы можете поместить оставшиеся 40 пикселей на каждый из li, 20px с каждой стороны влево и вправо:

.menuitem {
display: block;
padding: 0px 20px;
}

Когда вы измените размер браузера меньше, вы найдете еще белый фон: вместо фоновой текстуры вместо вашего div выберите body. Или, наоборот, отрегулируйте ширину навигационного меню от 100% до более низкого значения с помощью мультимедийных запросов. В вашем коде есть много настроек, чтобы создать правильный макет, я не уверен, что вы намереваетесь сделать, но приведенный выше код каким-то образом исправит ваш переполненный бар.

4

ответ дан Anne 24 August 2018 в 04:54

1

– Charles John Thompson III 6 January 2015 в 14:31

Проблема здесь в том, что тело и html установлены на display:table;.

Вам нужно переключить их display на block, чтобы исправить его.

2

ответ дан Bhargav Rao 24 August 2018 в 04:54

1

– TylerH 21 August 2018 в 20:23

Я решил проблему, используя overflow-x: hidden; следующим образом

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

структура выглядит следующим образом

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

3

ответ дан Chuck Le Butt 24 August 2018 в 04:54

Комментарий VictorS к принятому ответу заслуживает своего собственного ответа, потому что это очень элегантное решение, которое действительно работает. И я добавлю немного полезности.

Заметки Виктора добавили, что position:fixed работает.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

И это действительно так. Тем не менее, он также имеет небольшое побочное воздействие, существенно прокручивающееся вверх. position:absolute разрешает это, но повторно вводит возможность прокрутки на мобильном устройстве.

Если вы знаете свой видовой экран ( мой плагин для добавления видового экрана в <body> ), вы можете просто добавьте css toggle для position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

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

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

61

ответ дан Community 24 August 2018 в 04:54

1

– WraithKenny 26 May 2015 в 21:57
2

– Chuck Le Butt 12 January 2016 в 23:58
3

– Emil Borconi 25 March 2016 в 16:45
4

– Tobias 12 August 2016 в 05:44
5

– sohaiby 14 September 2016 в 11:47

Я только что работал над этим несколько часов, пытаясь использовать различные комбинации вещей на этой и других страницах. Дело в том, что для меня в конце концов было сделать обертку сайта div, как это было предложено в принятом ответе, но установить оба переполнения в скрытые, а не только переполнение x. Если я оставлю переполнения в прокрутке, я получаю страницу, которая только прокручивается вертикально на несколько пикселей, а затем останавливается.

#all-wrapper {
  overflow: hidden;
}

Просто этого было достаточно, не устанавливая ничего на теле или html элементы.

1

ответ дан highfellow 24 August 2018 в 04:54

Создание обертки сайта div внутри тела и применение переполнения-> x: скрытый к оболочке INSTEAD тела или html исправил проблему.

Это сработало для после добавления position: relative в обертку.

2

ответ дан Isaac F 24 August 2018 в 04:54

Я столкнулся с той же проблемой с устройствами Android, но не с устройствами iOS. Управляется удалением, указав позицию: относительный во внешнем div абсолютно позиционированных элементов (с переполнением: скрытый для внешнего div)

4

ответ дан Kwok Pan Fung 24 August 2018 в 04:54

Добавление обертки <div> вокруг всего вашего контента действительно сработает. В то время как семантически «icky», я добавил div с классом overflowWrap прямо в тег body, а затем установил мой CSS следующим образом:

html, body, .overflowWrap {
overflow-x: hidden;
}

Возможно, теперь будет излишним, но работает как прелесть!

4

ответ дан MBurnette 24 August 2018 в 04:54

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

работает на iOS9

15

ответ дан ollio 24 August 2018 в 04:54

1

– ThaoD5 1 August 2016 в 08:51
2

– Garavani 14 January 2017 в 23:03
3

– kiwicomb123 8 July 2017 в 19:00

Как субарахник сказал, что переполнение-x скрыто для обрабатываемого тела и html. Вот рабочий пример

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

Ссылка

3

ответ дан Skylin R 24 August 2018 в 04:54

Ни одно предыдущее решение не работало для меня, мне пришлось их смешивать и устранить проблему также на более старых устройствах (iphone 3).

Во-первых, мне пришлось обернуть содержимое html в внешний div :

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Затем мне пришлось применить переполнение, скрытое к оболочке, потому что overflow-x не работал:

  #wrapper {
    overflow: hidden;
  }

, и это исправило проблему.

5

ответ дан spaghetticode 24 August 2018 в 04:54

1

– Ian Kemp 2 November 2015 в 09:51
2

– spaghetticode 19 November 2015 в 11:02
3

– LarS 14 December 2017 в 07:04

попробуйте

html, body {
  overflow-x:hidden 
}

вместо просто

body {
  overflow-x:hidden 
}

53

ответ дан subarachnid 24 August 2018 в 04:54

1

– Indigenuity 11 January 2013 в 04:57
2

– subarachnid 11 January 2013 в 05:11
3

– Indigenuity 11 January 2013 в 05:12
4

– subarachnid 11 January 2013 в 05:24
5

– Eduard 1 August 2015 в 11:38

Как указано в @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег <meta name="viewport">.

Чтобы решить эту проблему у источника, попробуйте следующее:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

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

13

ответ дан Tempurturtul 24 August 2018 в 04:54

1

– JamesWilson 5 June 2017 в 13:17
2

– jpenna 23 July 2018 в 10:50

Единственный способ исправить эту проблему для моего bootstrap modal (содержащего форму) - это добавить следующий код в мой CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

1

ответ дан Tobias 24 August 2018 в 04:54

Это простейшее решение для разрешения горизонтальной прокрутки в Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

7

ответ дан Waltur Buerk 24 August 2018 в 04:54

1

– LarS 14 December 2017 в 07:06
2

– LarS 16 December 2017 в 13:00
3

– Waltur Buerk 14 February 2018 в 14:23
4

– sb. 1 March 2018 в 09:37

Другие вопросы по тегам:

javascript jquery css mobile mobile-safari

Запретить фоновый прокрутка за фиксированным Div в Mobile Safari? [Дубликат]

16 ответов

Похожие вопросы: