是否可以根据浏览器的宽度使用不同的skrollr锚值？

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中的属性不区分大小写 ，这意味着您也不能使用大写常量。 除此之外，您所做的一切都正确（尽管您也应该处理<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;
        }
    }
});