Question

我在理解我认为的数据锚定目标时遇到了问题，或者它没有做我想要的事情

我有一堆场景都具有相同的背景，我的pano元素。

<div id="pano"
     data--0p-top="top:0%; opacity:1; transform: scale(1);"
     data--200p-top="top:13%; opacity:0.5; transform: scale(2);"
     data--620p-top="top: 20%; transform: scale(3);"
     data--1000p-top="top:-100%; opacity:0.2; scale(4);">
</div>

<div id="scene1"
     data-anchor-target="#pano"
     data--50p-top="opacity:0.3; top: 20%; left: 5%; transform: scale(0);"
     data--100p-top="opacity:1; transform: scale(1); top: 10%; left:30%;"
     data--150p-top="opacity:0; transform: scale(1.5); top: -10%; left:60%;">
    <div class="cloud1"></div>
</div>

<div id="scene2" class="scene-text"
     data-anchor-target="#scene1"
     data--130p-top="transform: scale(0); opacity: 0.5; top: 27%;"
     data--150p-top="transform: scale(1); opacity: 1; top: 27%;"
     data--200p-top="transform: scale(1.2);"
     data--230p-top="transform: scale(3); opacity: 0;">
    <div class="content">
        <h2>Text</h2>
        <p>This is a excerpt telling a story.</p>
    </div>
</div>

据我所知，scene2的数据标记应该取决于scene1？但现在他们似乎仍然依赖pano作为顶部？

我的另一个问题是，当我尝试在此设置上实现skrollr menu来向每个场景调用锚点时，即使我在末尾放置一个元素并为其创建锚点，它几乎不会滚动到任何地方。我也尝试将data-menu-top设置为我希望链接转到的场景。

我的链接测试： <a href="#scene2" data-menu-top="700">Passenger Portal</a>只有一点偏移滚动到页面顶部。更改data-menu-top的值不起作用。

这是我的开始（我确实包含了jcery）

<script>
    var s = skrollr.init({
        smoothScrolling: true
        /*render: function (data) {
            //Log the current scroll position.
            console.log(data.curTop);
        }*/
    });

    skrollr.menu.init(s, {
        animate: true,

        //The easing function to use.
        easing: 'sqrt',

        //Multiply your data-[offset] values so they match those set in skrollr.init
        scale: 2,

        //How long the animation should take in ms.
        duration: function (currentTop, targetTop) {
            //By default, the duration is hardcoded at 500ms.
            return 500;

            //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
            //return Math.abs(currentTop - targetTop) * 10;
        },

        //If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`.
        //You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.
        handleLink: function (link) {
            return 400;//Hardcoding 400 doesn't make much sense.
        },

        //By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`.
        //If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part.
        //The following will all work (if the user is on the correct page):
        //http://example.com/currentPage/#foo
        //http://example.com/currentDir/currentPage.html?foo=bar#foo
        ///?foo=bar#foo
        complexLinks: false,

        //This event is triggered right before we jump/animate to a new hash.
        change: function (newHash, newTopPosition) {
            //Do stuff
        }
    });
</script>

Answer 1

我在skrollr菜单中遇到了同样的问题，只是部分向下。从启动脚本中删除此行允许它一直滚动到我想要的任何锚链接：

＆＃13;

        handleLink: function (link) {
            return 400;//Hardcoding 400 doesn't make much sense.
        },

＆＃13;

data-anchor-target和skrollr菜单

1 个答案: