How to enable or disable scroll in events?

help
1

How to enable or disable scroll in Meteor by click a button(event)?

By default the page is a full page and cannot scroll. When I click a button, main content appears and I can scroll the page. When I click again, I’m back to the default full page and cannot scroll again.

It’s something like:

(function() {
  var container = document.getElementById( 'container' ),
      trigger = container.querySelector( 'button.trigger' );
        
  function toggleContent() {
    if( classie.has( container, 'container--open' ) ) {
	window.addEventListener( 'scroll', noscroll );
    } else {
        window.removeEventListener( 'scroll', noscroll );
    }
  }

  function noscroll() {
    window.scrollTo( 0, 0 );
  }

  window.addEventListener( 'scroll', noscroll );
  trigger.addEventListener( 'click', toggleContent );
})();

Transform the above piece into this:

Template.home.events({
  'click button.trigger': function(event){
    var container = $('#container');
    var trigger = $('button.trigger');
    if (container.hasClass('container--open')) {
      container.removeClass('container--open');
      trigger.removeClass('trigger--active');
    } else {
      container.addClass('container--open');
      trigger.addClass('trigger--active');
    };
  }
})

I’ve also tried $('body').css('overflow-y: hidden') $('body').css('overflow: auto') in my Template.home.events and have no effects.

So, how can I do something to the “global” scroll via a template button event? Thanks a lot!

2

You have to find out which of the elements is the one that actually has the overflowing content and set the overflow-y: hidden on that one. It’s usually not the body element itself, but rather some container element further down the hierarchy.

And before you do that in your code, just do it via Chrome DevTools or similar by editing the CSS, and once it’s working there you can transfer it. Pick the innermost container element, set the overflow CSS property, see if scrolling works or not, and if it still does, move up one element and repeat until you find the one.