响应式平滑滚动 CSS3 动画？答案

【问题标题】：Responsive Smooth Scroll CSS3 Animation?响应式平滑滚动 CSS3 动画？
【发布时间】：2016-10-22 00:08:13
【问题描述】：

我一直在尝试获得平滑的滚动动画，但主要是在 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/

【问题讨论】：

标签： javascript css animation

【解决方案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% 的答案，但我希望到目前为止我建议的解决方案能帮助您调整并找到您正在寻找的东西。

【讨论】：