Показать сообщение отдельно
  #1 (permalink)  
Старый 01.06.2020, 19:54
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Как запретить прокрутку родительского блока?
Подскажите, пожалуйста, как при открытии окна дать возможность его прокручивать, при этом запретить прокрутку блока .container как колесиком мыши, так и зажатой левой клавишей мыши? При этом разметку html я менять не могу. Благодарю!

// Крутим колесиком мыши
(function() {
  function scrollHorizontally(e) {
    var scrollPos = this.scrollLeft;
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    this.scrollLeft -= (delta*40);
    var widthElem = this.scrollWidth;
    var widthBrowser = document.documentElement.clientWidth;
    if ((delta == 1 ) && (this.scrollLeft == 0)) return;
    if ((widthBrowser >= widthElem) || (scrollPos == this.scrollLeft)) return;
    e.preventDefault();
  }
  var elems = document.querySelectorAll('.container');
  for (var a = 0; a < elems.length; a++) {
    elems[a].addEventListener("mousewheel", scrollHorizontally, false);
    elems[a].addEventListener("DOMMouseScroll", scrollHorizontally, false);
  }
})();

// Крутим зажатой левой клавишей мыши
const slider = document.querySelector('.container');
let pressed = false,
  startX,
  scrollLeft;
slider.addEventListener('mousedown', e => {
  pressed = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
document.documentElement.addEventListener('mouseleave', ()=>{
  pressed = false;
});
document.documentElement.addEventListener('mouseup', ()=>{
  pressed = false;
});
document.documentElement.addEventListener('mousemove', e => {
  if( !pressed ) return;
  e.preventDefault();
  let x = e.pageX - slider.offsetLeft;
  slider.scrollLeft = scrollLeft - x + startX;
});

// Открываем окно
$(document).ready(function() {
  $('.open_modal').click(function(event) {
    event.preventDefault();
    let modal = $(this).attr('href'),
        overlay = $(modal).closest('.modal_overlay');
    overlay.fadeIn(400,
      function() {
        $('.container').css('overflow-x', 'hidden');
		$('body').css('overflow-y', 'hidden');
        overlay.css('overflow-y', 'scroll');
        if (overlay.innerHeight() > $(modal).outerHeight()) {
          $(modal).css("margin-top", (overlay.innerHeight() / 2 - $(modal).outerHeight() / 2) + "px");
        }
        $(modal)
          .css('display', 'block')
          .animate({
            opacity: 1,
            top: '0'
          }, 200);
      });
  });
  $('.modal_close').click(function(e) {
    $(e.target).closest('.modal_overlay').find('.modal_div')
      .animate({
          opacity: 0,
          top: '0'
        }, 200,
        function() {
          $(this).css('display', 'none');
          $(e.target).closest('.modal_overlay').fadeOut(400);
          $(e.target).closest('.modal_overlay').css('overflow-y', 'hidden');
          $('body').css('overflow-y', 'auto');
		  $('.container').css('overflow-x', 'auto');
        }
      );
  });
});


<style>
body {
  overflow: hidden;
}

.container {
  background-color: #f1f1f1;
  border: 2px solid black;
  width: 100%;
  height: 90vh;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  font-smoothing: antialiased;
  user-select: none;
  cursor: grab;
}
.container:active {cursor: grabbing;}

.item {
  display: inline-block;
  background-color: gray;
  width: 100%;
  height: 100%;
  vertical-align: top;
  margin: 0 5vw;
}

/*Окно*/
.modal_overlay {
	display: none;
	z-index: 999;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
}

.modal_div {
	display: none;
	z-index: 1000;
	width: 200px;
	margin: 0 auto;
	background-color: white;
}

.modal_close {
	position: fixed;
	top: 10px;
	left: 10px;
	color: white;
}
</style>

<div class="container">

  <div class="item"><a href="#modal_1" class="open_modal">Открыть окно</a></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

<!-- Окно -->
<div class="modal_overlay">
<div class="modal_close">Закрыть</div>
<div id="modal_1" class="modal_div">
<br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
</div>
</div>
<!-- .Окно -->

</div>

Последний раз редактировалось LADYX, 01.06.2020 в 20:02.
Ответить с цитированием