Question

我有点问题。当滚动到达动画div所在的位置时，我使用Animate.css和jquery使我的动画淡入。不幸的是，它不能很好地工作。当我按下使用平滑滚动到div的按钮时，它可以在FireFox中使用，也可以在IE中使用，但是如果我使用鼠标滚轮或使用滚动条，则它不会触发动画，而留出空白。

这是我的JavaScript：

// Smooth Scrolling
 $(document).ready(function(){
// Add smooth scrolling to all links
 $('.hashscroll').on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
 if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').stop(true, false).animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
  } // End if
 });
 });

// Detect for animation
$(document).ready(function() {
// Check if element is scrolled into view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// If element is scrolled into view, fade it in
$(window).scroll(function() {
$('.down .animated').each(function() {
  if (isScrolledIntoView(this) === true) {
    $(this).addClass('fadeInDown');
    $(this).removeClass('block');
  }
});
});
    $(window).scroll(function() {
$('.left .animated').each(function() {
  if (isScrolledIntoView(this) === true) {
    $(this).addClass('fadeInLeft');
    $(this).removeClass('block');
  }
});
});
});

这是我的html：

<div style="position:absolute; bottom: 0px; text-align: center; left: 0; width: 100%; z-index: 3"><a class="hashscroll" href="#wrapper1">
 <img src="assets/img/ArrowTallSmooth.gif" width="2%"/>  
 </a></div>

<div id=wrapper1>
 <div class="down"> 
 <div class="block animated">
    <p>Welcome to Station 2! It guides you through the numerous data inputs required by the LIC DSF Excel template and will help you understand how to do the following: </p>
                                  </div>  
          </div>

  <div class="left">                   
  <div class="block animated">
            <p>More Content</p>
  </div>
  </div>
</div>

当我单击图像并使用平滑滚动时，它可以在IE中使用，但是如果我使用鼠标滚轮或使用侧面的横条则不会触发。

感谢您的协助！

为什么动画不能在IE中的鼠标滚动上起作用但可以平滑滚动

0 个答案: