防止在浏览器和设备中滚动

时间:2015-07-14 17:59:05

标签: javascript

我有这个jquery来防止在浏览器和手持设备上滚动:

    $(document).ready(function() {
        $('div.overlay').click(function() {
            $('html').css('overflow', 'hidden');
            $('body').bind('touchmove', function(e) {
                e.preventDefault()
            });
        });
        $('.overlay-close').click(function() {
            $('html').css('overflow', 'scroll');
            $('body').unbind('touchmove');
        });
    });

但是我已经更新了javascript,现在snipp还没有工作......

这是javascript

(function() {
  var triggerButtons = document.getElementsByClassName('trigger-overlay'),
    overlay = document.querySelectorAll('div.overlay');
  var closeButtons = [];
  for (var i = 0; i < overlay.length; i++) {
    var closeBttn = overlay[i].querySelector('button.overlay-close');
    closeButtons.push(closeBttn);
  }

  transEndEventNames = {
      'WebkitTransition': 'webkitTransitionEnd',
      'MozTransition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'msTransition': 'MSTransitionEnd',
      'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
    support = {
      transitions: Modernizr.csstransitions
    };

  function toggleOverlay(overlay) {
    if (classie.has(overlay, 'open')) {
      classie.remove(overlay, 'open');
      classie.add(overlay, 'close');
      var onEndTransitionFn = function(ev) {
        if (support.transitions) {
          if (ev.propertyName !== 'visibility') return;
          this.removeEventListener(transEndEventName, onEndTransitionFn);
        }
        classie.remove(overlay, 'close');
      };
      if (support.transitions) {
        overlay.addEventListener(transEndEventName, onEndTransitionFn);
      } else {
        onEndTransitionFn();
      }
    } else {
      classie.add(overlay, 'open');
      classie.remove(overlay, 'close');
    }
  }


  for (var i = 0; i < triggerButtons.length; i++) {
    triggerButtons[i].addEventListener('click', (function(i) {
      return function() {
        toggleOverlay(overlay[i])
      };
    })(i));
  }

  for (var i = 0; i < closeButtons.length; i++) {
    closeButtons[i].addEventListener('click', (function(i) {
      return function() {
        toggleOverlay(overlay[i])
      };
    })(i));
  }
})();

当我在弹出的叠加层中单击(随机)时,似乎无滚动代码启动,然后当我按closeBttn时未启用它。

预期结果:

显示叠加时(按下triggerbutten时)禁用滚动。然后在叠加层关闭时启用滚动。

0 个答案:

没有答案