Ответ 1

Простой ответ, который вы могли бы использовать, и не потребовал бы, чтобы вы остановили событие прокрутки, было бы установить фиксированную позицию вашего #ac-wrapper.

например.

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

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

Но прокрутка страницы при всплывающем всплытии - это НЕОБХОДИМО!!! (почти всегда в любом случае)

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

Решение состоит в том, что когда вы привязываете событие click в javascript для отображения этого всплывающего окна, также добавляете класс в тело по существу этим правилам:

.my-body-noscroll-class {
    overflow: hidden;
}

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

Если пользователь затем прокручивается, когда всплывающее окно открыто, документ не будет прокручиваться. Когда пользователь закрывает всплывающее окно, прокрутка станет доступной снова, и пользователь может продолжить, где он остановился:)

Ответ 2

Чтобы отключить полосу прокрутки:

$('body').css('overflow', 'hidden');

Это скроет полосу прокрутки

Фон-нарастающая вещь:

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

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

Ответ 3

У меня была аналогичная проблема; желая отключить вертикальную прокрутку, пока отображается "всплывающее" div.

Изменение свойства переполнения body действительно работает, но также беспорядок с шириной документа.

Я выбрал jquery, чтобы решить эту проблему, и использовал заполнитель для полосы прокрутки. Это было сделано без привязки к событию scroll, ergo это не изменяет ваше положение полосы прокрутки или не мерцает:)

HTML:

<div id="scrollPlaceHolder"></div>

CSS

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

Jquery:

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

Надеюсь, что это поможет.

Ответ 4

Используйте приведенный ниже код для отключения и включения полосы прокрутки.

 Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();

Ответ 5

У меня была такая же проблема и нашла способ избавиться от нее, вам просто нужно остановить распространение на touchmove на свой элемент, который появляется. Для меня это было полноэкранное меню, появившееся на экране, и вы не могли прокручивать, теперь можете.

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});

Ответ 6

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html: - Открыть всплывающее окно

Неожиданно возникнуть

pop open scroll stop now... когда я нажимаю на кнопку close, автоматически прокручивается.

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>

Ответ 7

Если простое переключение тела 'overflow-y' нарушает положение прокрутки страницы, попробуйте использовать эти 2 функции (jQuery):

// Run this function when you open your popup:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Run this function when you close your popup:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}

Ответ 8

Это решение работает для меня.

HTML:

<div id="payu-modal" class="modal-payu">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

CSS:

.modal-payu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  bottom: 0;


  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JS:

<script>
      var btn = document.getElementById("button_1");
      btn.onclick = function() {
        modal.style.display = "block";
        $('html').css('overflow', 'hidden');
      }

    var span = document.getElementsByClassName("close")[0];
    var modal = document.getElementById('payu-modal');

    window.onclick = function(event) {
      if (event.target != modal) {
      }else{
        modal.style.display = "none";
        $('html').css('overflow', 'scroll');
      }
    }

    span.onclick = function() {
      modal.style.display = "none";
      $('html').css('overflow', 'scroll');
    }

    </script>