javascript - 跨浏览器鼠标滚轮,通过一个滚轮滚动 100% 浏览器高度

标签 javascript jquery css scroll mousewheel

有一些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');
}
 });
 });

通过单个鼠标滚轮滚动第一个 block 100% 高度。此代码在 firefox 中不起作用。如果玩滚动,则存在错误。请帮助修复该问题并添加跨浏览器支持。 请看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);
})

});

谢谢你)

关于javascript - 跨浏览器鼠标滚轮,通过一个滚轮滚动 100% 浏览器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25251163/

相关文章:

html - z-index 和 DOM 层次结构是否需要相互对齐?

javascript - 将react-native从 0.68 升级到 0.69 时,出现此错误

javascript - AngularJS ng-重复问题并使用匹配的答案对象初始化输入

javascript - Google Apps 脚本 HTML 服务的新功能

javascript - 在 ASP.NET MVC 应用程序中使用 AngularJS 发布表单

jquery - 向特定图像添加类

javascript - 如何像 ajax 一样在 jQuery.load 中传递 header ?

javascript - 将行为附加到 Javascript 中的命名空间调用?

css - 如何使用 Bootstrap 网格制作此 View ?还是我应该使用列表组?

php - CSS3/IE 兼容性以及阴影和边框