Деактивация скрипта
Доброго времени.
В общем, есть страница с плагином для плавного скроллинга этой самой страницы и попап, в котором тоже есть свой скролл бар. Проблема состоит в том, что скролл бар попапа не прокручивается колёсиком мышки. Возможно, ли как-то деактивировать плагин если открыт попап или есть какое-то более элегантное решение? Спасибо. Демо: 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> |
artstyles,
добавить в плагин строку 2 $window.on('mousewheel DOMMouseScroll', function(e) { if($(e.target).closest(".cd-popup").length) return; var deltaY = e.originalEvent.wheelDeltaY, |
Спасибо!
|
Часовой пояс GMT +3, время: 10:09. |