Подскажите, пожалуйста, как при открытии окна дать возможность его прокручивать, при этом запретить прокрутку блока .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>