如何暂时禁用滚动?

2020/09/27 04:41 · javascript ·  · 0评论

我正在使用jQuery的scrollTo插件,想知道是否可以通过Java临时禁用window元素上的滚动吗?我要禁用滚动的原因是,当您在scrollTo设置动画时滚动时,它真的很难看;)

当然,我可以做一个$("body").css("overflow", "hidden");,然后在动画停止时将其放回自动状态,但是如果滚动条仍然可见但处于非活动状态会更好。

scroll事件无法取消。但是您可以通过取消以下交互事件来实现:
鼠标 触摸滚动以及与滚动相关的按钮

[ 工作演示 ]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

更新:修复了带有被动监听器的Chrome台式机和现代移动浏览器

只需在正文中添加一个类即可:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

要在IE,FF,Safari和Chrome中进行测试,请添加类,然后在要重新启用滚动功能时将其删除。

$('body').addClass('stop-scrolling')

对于移动设备,您需要处理以下touchmove事件:

$('body').bind('touchmove', function(e){e.preventDefault()})

并取消绑定以重新启用滚动。在iOS6和Android 2.3.3中测试

$('body').unbind('touchmove')

这是一种非常基本的方法:

window.onscroll = function () { window.scrollTo(0, 0); };

在IE6中有点跳动。

以下解决方案是基本但纯JavaScript(无jQuery)的解决方案:

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

该解决方案将在禁用滚动时保持当前滚动位置,这与某些将用户跳回顶部的方法不同。

它基于galambalazs的answer,但支持触摸设备,并使用jquery插件包装器重构为单个对象。

演示在这里。

在github这里。

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

很抱歉回答一个旧帖子,但我一直在寻找解决方案,并遇到了这个问题。

对于此问题,有许多解决方法仍可以显示滚动条,例如为容器提供100%的高度和overflow-y: scroll样式。

就我而言,我刚刚创建了一个带有滚动条的div,在添加overflow: hidden到主体时会显示该滚动条

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

元素滚动条必须具有以下样式:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

这显示了一个灰色滚动条,希望对将来的访问者有帮助。

我一直在寻找解决此问题的方法,但对上述任何一种方法都不满意(在撰写此答案时),所以我想出了这个方法。

的CSS

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

JS

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

根据galambalazs的帖子,我将添加对触摸设备的支持,使我们可以触摸但不能上下滚动:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

从Chrome 56和其他现代浏览器开始,您必须添加passive:falseaddEventListener通话中才能preventDefault正常工作。所以我用它来停止在手机上滚动:

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

不,我不会进行事件处理,因为:

  • 并非所有事件都能保证顺利进行,

  • 选择文本并向下移动实际上会滚动文档,

  • 如果在事件分离阶段某事出了错,那么您注定要失败。

我已经通过在隐藏的textarea上执行复制粘贴操作来猜中了,然后猜测是什么,每当我进行复制时页面就会滚动,因为在内部必须在调用之前选择textarea document.execCommand('copy')

无论如何,请注意setTimeout()

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

当滚动条暂时消失时,存在动量闪烁,但这是可以接受的。

根据您要使用移除的滚动条实现的目的,您可以修复要从中移除滚动条的元素(单击时,或要暂时停用滚动条的其他任何触发器)

我一直在寻找“临时无滚动”解决方案,而对于我的需求,这解决了它

上课

.fixed{
    position: fixed;
}

然后用jQuery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

我发现这是一个足够简单的解决方案,可以在所有浏览器上很好地工作,并且还可以轻松地用于便携式设备(例如iPhone,平板电脑等)。由于该元素是临时固定的,因此没有滚动:)

注意!根据“ contentContainer”元素的位置,您可能需要从左侧进行调整。当固定类处于活动状态时,可以通过向该元素添加css left值来轻松完成此操作

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

另一个解决方案:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

这样,您始终会有一个垂直滚动条,但是由于我的大部分内容都比视口长,因此这对我来说是可以的。内容以单独的div为中心,但是如果不再次在正文中设置边距,我的内容将停留在左侧。

这是我用来显示弹出窗口/模式的两个函数:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

结果:背景不可滚动,并且由于左侧滚动条而无法重新定位内容。已使用当前的FF,Chrome和IE 10测试。

var winX = null, winY = null;
window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});
function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
};
function enableWindowScroll() {
    winX = null;
    winY = null;
};

这个怎么样?(如果您使用的是jQuery)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

我正在使用showModalDialog,用于将辅助页面显示为模式对话框。

隐藏主窗口滚动条:

document.body.style.overflow = "hidden";

当关闭模式对话框时,显示主窗口滚动条:

document.body.style.overflow = "scroll";

从对话框访问主窗口中的元素:

parent.document.getElementById('dialog-close').click();

仅适用于任何搜索showModalDialog的人:(原始代码第29行之后)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

我认为取消事件是可接受的答案:/

相反,我position: fixed; top: -scrollTop();在下面使用

演示:https : //jsfiddle.net/w9w9hthy/5/

从我的jQuery弹出项目中:https : //github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

此代码考虑了宽度,高度,滚动条和页面跳转问题。

上面的代码可能解决的问题:

  • 宽度,当设置位置固定时,html元素宽度可以小于100%
  • 高度,同上
  • 滚动条,固定设置位置后,页面内容不再具有滚动条,即使在导致水平页面跳转之前具有滚动条
  • pagejump,当固定设置位置时,页面scrollTop不再有效,导致垂直页面跳转

如果有人对以上页面的冻结/取消冻结代码有任何改进,请告诉我,以便将这些改进添加到我的项目中。

我有同样的问题,下面是我的处理方式。

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

希望对您有所帮助。

这是我停止滚动的解决方案(没有jQuery)。当出现侧面菜单时,我用它来禁用滚动。

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

我向右填充了17px,以补偿滚动条的消失。但这也有问题,主要是针对移动浏览器。根据此方法获得钢筋宽度来解决

一起在这支笔。

以夏安·福布斯(Cheyenne Forbes)的答案为基础,我通过fcalderan在这里找到了一个答案:只是禁用滚动而不是隐藏它?
并修复Hallodom滚动条消失的问题

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

这段代码确实将您带到了页面顶部,但是我认为fcalderan的代码具有解决方法。

我知道这是一个古老的问题,但是我不得不做一些非常相似的事情,经过一段时间寻找答案并尝试了不同的方法后,我最终使用了一个非常简单的解决方案。

我的问题非常相似,几乎完全相同,唯一的区别是我不必真正显示滚动条-我只需要确保仍然使用其宽度,因此在显示叠加层时页面的宽度不会改变。

当我开始将叠加层滑入屏幕时,我会执行以下操作:

$('body').addClass('stop-scrolling').css('margin-right', 8);

在将覆盖层滑出屏幕后,我做了:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

重要提示:本作品完美,因为我的叠加定位absoluteright: 0pxvisible

最简单的方法是:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

要撤消它:

$("body").css("overflow", "auto");

易于实现,但唯一的缺点是:

  • 如果页面居中(水平),它将向左跳一点。

这是由于移除了滚动条,并且视口变得更宽了。

我在触控装置上有类似的问题。向该元素添加“ touch-action:none”解决了该问题。

想要查询更多的信息。看一下这个:-

https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

这是我到目前为止获得的最简单的解决方案。相信我,我尝试了所有其他方法,这是最简单的方法。在Windows设备上效果很好,可将页面从右侧推入以为系统滚动条和IOS设备留出空间,这些设备在浏览器中不需要滚动条空间。因此,通过使用此方法,您将不需要在右侧添加填充,这样当您使用CSS隐藏正文或html的溢出时,页面就不会闪烁

如果您考虑一下,该解决方案将非常简单。这个想法是在打开弹出窗口时为window.scrollTop()提供相同的精确位置。当窗口调整大小时,也要更改该位置(因为滚动位置一旦发生变化就更改)。

所以我们开始...

首先让我们创建一个变量,该变量将使您知道弹出窗口已打开,并将其称为stopWindowScroll如果我们不这样做,那么您会在页面上收到未定义变量的错误,并将其设置为0-未激活。

$(document).ready(function(){
    stopWindowScroll = 0;
});

现在让打开的弹出窗口功能成为您代码中任何触发您用作插件或自定义弹出窗口的函数。在这种情况下,它将是一个简单的自定义弹出窗口,并带有单击功能的简单文档。

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

因此,我们接下来要做的就是创建关闭弹出功能,我再重复一遍,它可以是您已经创建或正在插件中使用的任何功能。重要的是,我们需要这两个函数将stopWindowScroll变量设置为1或0才能知道何时打开或关闭它。

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

然后让我们创建window.scroll函数,以便一旦上述stopWindowScroll设置为1-处于活动状态,就可以防止滚动

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

而已。除了您自己的页面样式外,不需要CSS即可运行。这对我来说就像是一种魅力,希望对您和其他人有帮助。

这是有关JSFiddle的工作示例:

JS小提琴示例

让我知道是否有帮助。问候。

将滚动长度存储在全局变量中,并在需要时将其恢复!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

此代码将在Chrome 56及更高版本上运行(原始答案不再在Chrome上运行)。

使用DomUtils.enableScroll()启用滚动。

使用DomUtils.disableScroll()以禁用滚动。

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

为了防止跳跃,这就是我使用的

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

在我的CSS中

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

我在另一个网站上找到了这个答案

禁用滚动:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

关闭弹出窗口后,滚动:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

galambalazs的解决方案很棒!它在Chrome和Firefox中都非常适合我。并且它也可以扩展为防止来自浏览器窗口的任何默认事件。假设您正在画布上做一个应用程序。您可以这样做:

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },

  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },

  wheel: function(e) {
    events.preventDefault(e);
  },

  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },

  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

然后在您的应用上,假设您要处理自己的事件,例如鼠标,键盘,触摸事件等...您可以在鼠标进入画布内时禁用默认事件,并在鼠标进入画布时重新启用它们熄灭:

function setMouseEvents(canvas) {
  var useCapture = false;

  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);

  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

您甚至可以通过此hack禁用右键菜单:

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

当尝试使用jquery的animate命令为div设置动画时,我在移动屏幕上遇到了类似的动画问题,但在笔记本电脑上却没有。因此,我决定使用计时器来恢复窗口的滚动位置,以至于肉眼看不见该文档是静态的。此解决方案在像Samsung Galaxy-2或iphone-5这样的小屏幕移动设备上完美运行。

这种方法的主要逻辑:应该在jquery animate命令之前启动将窗口的滚动位置设置为原始滚动位置的计时器,然后在完成动画后,我们需要清除此计时器(original scroll position即在动画开始之前的位置)。

令我惊喜的是,如果计时器间隔为1 millisecond,则该文件实际上在动画持续时间内显示为静态,这正是我的目标。

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

可行的另一个解决方案:根据Mohammad Anini在这篇文章下启用/禁用滚动的回答,我还发现以下代码的修改版本可行。

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

一个对我有用的简单解决方案(暂时禁用窗口滚动)。

基于此提琴:http : //jsfiddle.net/dh834zgw/1/

以下代码段(使用jquery)将禁用窗口滚动:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

并在您的CSS中:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

现在,当您删除模态时,不要忘记删除html标签上的noscroll类:

$('html').toggleClass('noscroll');
本文地址:http://javascript.askforanswer.com/ruhezanshijinyonggundong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!