0

I have a homework task in which I need to test the best method using JavaScript with Jquery of preventing scrolling of a browser page. Ideally, the method should work in all the main browsers like Google, Mozilla, Opera, IE, Safari on both types of devices: PCs and mobile phones.

This a research for cross-browser functionality, so I'm looking for advises from professionals.

<head>
    <meta charset="utf-8">
    <title>Новостное агентство</title>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <link rel="stylesheet" type="text/css" href="styles/normalize.css">
    <link rel="stylesheet" type="text/css" href="styles/header.css">
    <link rel="stylesheet" type="text/css" href="styles/footer.css">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <link rel="stylesheet" type="text/css" href="styles/aside.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div class="popup-container">
        <div class="popup">
            Popup window
        </div>
    </div>
    <header> Continues the HTML layout

.popup-container {
  display: none;

  position: fixed;

  background: url(../img/bg.png);

  width: 100%;
  height: 100%;

  z-index: 10;
}

 .popup {
  background-color: white;

  font-size: 0;

  width: 0;
  height: 0;

  padding: 20px;
  margin: 40px auto;
}

$(function() {
  function disableScroll() {
    $('html, body').on('mousewheel', function() {
      return false;
    });
  }

  function enableScroll() {
    $('html, body').off('mousewheel');
  }

  $('.all-news').click(function() {
    $('.popup-container').fadeIn(400, disableScroll);
    $('.popup').animate({
      width: '200px',
      height: '300px',
      'font-size': '16px'
    }, 400);
  });

  $('.popup-container').click(function(event) {
    if(event.target == this) {
      $(this).fadeOut(400, enableScroll);
      $('.popup').animate({
        width: 0,
        height: 0,
        'font-size': 0
      }, 400);
    }
  });
});
Igor Erokhin
  • 1
  • 3
  • https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery – ChrisFNZ Aug 14 '19 at 02:22
  • Possible duplicate of [How to programmatically disable page scrolling with jQuery](https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery) – Bwvolleyball Aug 14 '19 at 02:49

0 Answers0