レスポンシブスムーススクロールCSS3アニメーション？

Question

私はしばらくの間スムーズなスクロールアニメーションを得ようとしてきましたが、主にJSで.. これはうまくいきませんでしたので、CSS3で試してみることにしました。 アニメーションが対象とするオブジェクトに応じてアニメーションのCSSルールを追加するJS関数を呼び出すことで、このアニメーションを反応的にしたいと考えています。ここまで私が持っている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> 

お知らせiはgetBoundingClientRectのfucntionは、xとyの値を返さない一部のブラウザ上のようrect.topするrect.yを変更したが、左とトップは、常に満ちている。

また、アンカーclass = "toplink"の親にidが設定されていないため、オブジェクトの親のIDを取得する理由がわからないので、常にnullまたは空として戻されます。

申し訳ありませんが、100％回答では忙しいと思いますが、私が提案したソリューションはこれまでのところ、調整してあなたの探しているものを見つけるのに役立ちます。