14

我目前正在一个网站上工作,该网站在滚动功能方面需要类似的东西:http: //www.apple.com/iphone-5s/

在提出这个问题的过程中,我上传了网站的一部分 - http://www.bnacademy.com.au/

我浏览了该网站的(苹果)代码,当然,正如我应该怀疑的那样,我发现它是空的。我正在寻找一种可以滚动的整页 div(带有背景图像)的方法,并且滚动到下一个 div 发生在鼠标的单个向上/向下滚动上。

我已经处理了动态整页 div,我几乎什至向下滚动功能,但它只是没有按我的预期工作,我已经花了几天的时间。

HTML:

<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>

CSS:

.homesPosition {
    top: 100%;
}

.splashPage {
    background: black;
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#containerHomes {
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background:url(../img/background-placeholder.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}

查询:

<!-- Keep the div at max page height and width -->
<script type="text/javascript">
var height = $(window).height();
var width = $(window).width();
$(function() {
    $(window).resize(function() {
        $(".mainDiv").height(height);
        $(".mainDiv").width(width);
        $("#sidebar").height(height);
    var height = $(window).height();
    var width = $(window).width();
    });
});
</script>

<!-- Scroll up and down detection/movement -->
<script type="text/javascript">
    $(window).bind('mousewheel', function(event) {
        if (event.originalEvent.wheelDelta >= 0) {
            $(window).scrollTo('0%', 1000);
        }
        else {
            $(window).scrollTo('100%', 1000);
        }
        event.preventDefault()
    });
</script>

我正在使用 Flesler 的 scrollTo 插件(实际上仍然没有代表发布超过 2 个链接)

哪个工作正常,但我还没有找到一种方法来以我想要的方式上下滚动。使用我在那里的东西,如果你(像很多用户一样)向滚轮发送垃圾邮件以向上/向下移动,我很确定 wheelDelta 计数被搞砸了,它将无法正常运行。

我几乎尝试了谷歌前 10 页上与作为功能向上和向下滚动相关的每个链接,以及关于 SO 的大多数相对问题。

我的主要目标是滚动功能。

4

4 回答 4

34

在编写了像您这样的页面之后,我为此类网站创建了一个简单的插件fullPage.js博客文章

它是第一个版本。我会尽我所能继续改进它。例如,添加一个从菜单中调用的方法会很好。以及对每个部分使用 o hastags (#),依此类推。这应该在我在我的页面中使用它时尽快完成。

你可以在我的 github 帐户上找到更多关于它的用法

现场演示:http ://alvarotrigo.com/fullPage/

工作环境:(IE 8、Chrome、Firefox、Opera > 11、Safari、触摸设备)

我希望它有帮助!

于 2013-09-25T15:54:50.107 回答
11

试试这个脚本

$(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length -1) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });

小提琴演示

全屏演示

于 2013-09-23T07:24:33.640 回答
6

我一直在摆弄类似问题的解决方案。

我的解决方案就是在窗口滚动时进行监控。

if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {

如果它滚动超过“页面”的末尾超过 50 像素,jquery 会将滚动动画到下一个“页面”。

$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});

向上滚动也是如此。这包括通过鼠标、键盘或 javascript 滚动。

在http://jsfiddle.net/dLCwC/1/查看完整代码

也许它对某人有用(让我知道它是否有用)。

于 2013-12-10T01:38:35.613 回答
-2

Make sure you don't have height:100% or height:100vh on the body. I had this exact same issue and the only thing that fixed it was removing this.

于 2016-07-09T17:29:35.967 回答