Question

无论如何，我可以在动画开始时锁定窗口滚动吗？

我有这个特别的动画：

Element.animate({
 opacity: 1,
 left: '0px'
});

我希望之前锁定窗口滚动。我知道如何在回调中解锁：

Element.animate({
 opacity: 1,
 left: '0px'
}, function(){
 // UNLOCK HERE
});

但是在动画开始之前LOCK窗口滚动怎么样？这是可能的???

我想强迫访问者看动画，然后他/她可以再次滚动..

谢谢！

Answer 1

＆＃13;

$("div").animate({
 opacity: 1,
 left: '0px'
}, {
  duration:3000,
  start:function() {
    $("body").css("overflow","hidden")
  },
  complete:function() {
    $("body").css("overflow","scroll")
  }
});

＆＃13;

body {
  overflow:scroll;
}

div {
  position:relative;
  left:200px;
  opacity:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>abc</div>

＆＃13;

Answer 2

document.body.style.overflow = "hidden";
Element.animate({
    opacity: 1,
    left: '0px'
    }, function(){
         document.body.style.overflow = "";
});

JsBin示例：http://jsbin.com/nonodobavo/1/ - 单击启用并禁用滚动。

在动画之前锁定滚动并在之后解锁

2 个答案: