Question

我很难让我想要的skrollr动画完全按照我想要的方式出现在不同的屏幕宽度上。我在外部样式表中使用媒体查询来调整页面的布局，我需要为每个宽度设置不同的绝对值锚点：桌面，平板电脑和移动设备。

我在线搜索了skrollr文档，但没有看到任何可以帮助我的内容。

更清楚的是，'data-2415-start'在桌面设备上运行良好，但由于视图在平板电脑中改变了大小，因此2415不是我想要的宽度值。

我可以做些什么来达到不同尺寸的这种精确度？

更新：尝试按照以下评论

我是否在正确的轨道上？

<div data-_startAnchor-start = "top:0px;" data-2610-start = "top:-140px"></div>

skrollr.init({
    constants: {
        startAnchor: function() {

            var width = screen.width;
            var startAnchor;

            if (width > 800) {
                startAnchor = 2415;
            } else if (width > 600) {
                startAnchor = 2215;
            } else if (width > 400) {
                startAnchor = 2115;
            }

            return startAnchor;
        }
    }
 });

Answer 1

HTML中的属性是不敏感，这意味着您也不能使用大写常量。除此之外，你做的一切都是正确的（你也应该处理＆lt; 400，而不是返回undefined）。

<div data-_startanchor-start = "top:0px;" data-2610-start = "top:-140px"></div>

skrollr.init({
    constants: {
        startanchor: function() {

            var width = screen.width;
            var startAnchor;

            if (width > 800) {
                startAnchor = 2415;
            } else if (width > 600) {
                startAnchor = 2215;
            } else if (width > 400) {
                startAnchor = 2115;
            }

            return startAnchor;
        }
    }
});

我可以根据浏览器的宽度使用不同的skrollr锚点值吗？

1 个答案: