Доброго времени.
В общем, есть страница с плагином для плавного скроллинга этой самой страницы и попап, в котором тоже есть свой скролл бар.
Проблема состоит в том, что скролл бар попапа не прокручивается колёсиком мышки.
Возможно, ли как-то деактивировать плагин если открыт попап или есть какое-то более элегантное решение?
Спасибо.
Демо:
https://codepen.io/ArtStyles/pen/PjYzgo
<html>
<head>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
line-height: normal;
margin: 5%;
padding: 0;
background: #111;
-webkit-font-smoothing: antialiased;
}
.btn {
position: fixed;
z-index: 1;
top: calc(50% - 30px);
left: calc(50% - 80px);
width: 160px;
height: 60px;
line-height: 61px;
text-align: center;
}
h1 {
font-size: 28px;
font-weight: 300;
line-height: 150%;
color: #777;
}
b {
color: #FFF;
}
.img-replace {
display: inline-block;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
.cd-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
bottom: 0;
left: 0;
}
.cd-nugget-info a {
position: relative;
font-size: 14px;
color: #5e6e8d;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
opacity: .8;
}
.cd-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.cd-nugget-info span svg {
display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
fill: #5e6e8d;
}
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
.is-visible {
overflow: hidden;
}
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100wh;
background-color: #585e66;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index: 2;
}
.is-visible .cd-popup {
opacity: 1;
visibility: visible;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 90%;
height: 90vh;
overflow: auto;
color: #fff;
margin: 4em auto;
font-size: 18px;
line-height: 2;
-webkit-backface-visibility: hidden;
transition-property: transform;
transition-duration: 0.3s;
}
.cd-popup-container p {
padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
content: "";
display: table;
clear: both;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #fff;
}
.cd-popup-container .cd-popup-close::before {
transform: rotate(45deg);
left: 7px;
top: 10px;
}
.cd-popup-container .cd-popup-close::after {
transform: rotate(-45deg);
right: 9px;
}
.is-visible .cd-popup-container {
transform: translateY(0);
}
</style>
</head>
<body>
<h1>Text text text</h1>
<div class="btn"><a href="#!" class="cd-popup-trigger">Open PopUp</a></div>
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p>Text text text</p>
<a href="#0" class="cd-popup-close img-replace">Close</a>
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>
<script>
$(function() {
//scrollSpeed
$.scrollSpeed(100, 800);
//Open Popup
$('.cd-popup-trigger').on('click', function() {
$('body').addClass('is-visible');
});
//Close Popup
$('.cd-popup-close').on('click', function() {
$('body').removeClass('is-visible');
});
});
</script>
</body>
</html>