跨浏览器鼠标滚轮，通过一个滚轮滚动100%的浏览器高度

cross browser mouse wheel, to scroll 100% browser height by one single wheel

本文关键字：浏览器 一个 滚动 高度 100% 鼠标      更新时间：2023-09-26

有一些js

$(document).ready(function(){
var winHeight = window.innerHeight ?
        function() {
            return window.innerHeight;
        } :
        function() {
            return document.documentElement.clientHeight;
        };
$('.first-block').height(winHeight);
$(window).scroll(function(){
var firstBlockHeight = winHeight();
var scrollTop= $('body').scrollTop();
if (scrollTop > 0 && scrollTop < firstBlockHeight/2 && $('body').hasClass('scrolled') === false) {
$("body")
  .animate({ scrollTop: firstBlockHeight+10 }, 600)
  .addClass('scrolled');
} else if (scrollTop==0) {
$("body")
.animate({ scrollTop: 0 }, 600)
.removeClass('scrolled');
}
 });
 });

通过单个鼠标滚轮滚动第一个块100%的高度。这段代码不能在firefox中工作。如果玩滚动也会有bug。请帮助解决这个问题，并添加跨浏览器支持。请参阅JsFiddle

谢谢。

我使用mouswheel.js，我做到了!：）可能对某人有用

$(document).ready(function(){
var winHeight = window.innerHeight ?
            function() {
                return window.innerHeight;
            } :
            function() {
                return document.documentElement.clientHeight;
            };
$('.first-block').height(winHeight);
var BlockHeight = $('.first-block').height();
$.browser = {};
$.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) &&     !/webkit/.test(navigator.userAgent.toLowerCase());
if($.browser.mozilla)
{
 var ScrollType = 'html';
  }
else
   {
 var ScrollType = 'body';
  }
$('.first-block').mousewheel(function(event, delta, deltaX, deltaY) {
  if((delta<0) && ($(ScrollType).scrollTop()==0)) $(ScrollType).animate({ scrollTop: BlockHeight-    104 }, 600);
});
$(ScrollType).keydown(function(event){
 if((event.keyCode==40) && ($(ScrollType).scrollTop()==0)) $(ScrollType).animate({ scrollTop:  BlockHeight-104 }, 600);
})
});

谢谢我)

相关文章：