响应式平滑滚动CSS3动画？

Question

我一直在尝试获得平滑的滚动动画，但主要是在JS中进行。这还没有得到很好的解决，所以我决定尝试CSS3。 现在，我想通过调用JS函数使该动画具有响应性，该函数添加了动画的CSS规则以响应该动画所针对的对象。 这是到目前为止我得到的JS代码。 我也会留下小提琴，但是我是新手，所以事情可能不会马上生效。

function getTexts() {

    var element = document.getElementsByClassName('toplink');

    for (x = 0, len = element.length;  x < len; x++){

        var ID = element[x].textContent.toLowerCase();
        var object = document.getElementById(ID);
        console.log(object);
        addCSSAnimator(ID);

    }
}

function addCSSAnimator(el) {

    var sheet = document.styleSheets[0];
    var DOM = document.getElementById(el);
    var Class = DOM.getAttribute("class");
    var Parent = DOM.parentElement.getAttribute("id");
    var rect = DOM.getBoundingClientRect();

    var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
        "-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
        "transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
        "}";

    console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);

    console.log(rule);

    sheet.insertRule("body { background-color: 0; }", 1);
}

https://jsfiddle.net/dtj46c64/

Answer 1

您可以尝试使用jquery以获得此解决方案。 使用document.ready和window.resize函数来处理动画，也可以代替for循环。 使用jquery .each（）函数获取元素。 尝试解决以下我为您更改的代码。 希望这能为您提供正确的方向，以实现您的目标：

 <script>
    function getTexts() {

        $(".toplink").each(function () {
            let ID = $(this)
            console.log(ID);
            addCSSAnimator(ID);
        });
    }

    function addCSSAnimator(el) {

        var sheet = document.styleSheets[0];
        var DOM = el;
        var Class = DOM.attr("class");
        var Parent = DOM.parent().attr("id");
        var rect = DOM[0].getBoundingClientRect();
        var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
            "-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
            "transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
            "}";

        console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);

        console.log(rule);

        sheet.insertRule("body { background-color: 0; }", 1);

    }

    $(window).on('resize', function () {
        getTexts();
    });

    $(document).ready(function () {
        getTexts();
    });
    </script>

注意，我将rect.y更改为rect.top，因为在某些浏览器上，getBoundingClientRect功能不返回x和y值，但始终填充left和top。

还不知道为什么要获取对象的父代的ID，因为没有为锚定class =“ toplink”的父代设置ID，因此它将始终返回null或为空。

很抱歉没有一个100％的答案，因为我很忙，但是我希望到目前为止我建议的解决方案可以帮助您进行调整，找到您想要的东西。