divを追加して右にスクロール

新しいdivを親のdivの既存のものの末尾に追加し、右にスクロールして最後の追加のものを常に表示する必要があります。divを追加して右にスクロール

jQueryscrollLeftを使用したすべての試行は失敗しました（注：使用は特に義務的ではありません）。

これは一例です：

<!DOCTYPE html> 
<html> 
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1">  
     <title>list1b</title>  
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

     <style>  
      #results { 
       font-size: 500%; 
       display: flex; 
       height: 4cm; 
       align-items: center; 
       overflow: auto; 
      }  
     </style> 

     <script>  
      var formula1 = "1 + 2x"; 
      var formula2 = "= 1 + 2y"; 

      var appendDiv = function (f) { 
       var newDiv = $("<div style='min-width:10cm;'>" + f + ·</div>"); // this div is an example 
       var dstDiv = $('#results'); 
       dstDiv.append(newDiv); 
       //dstDiv.scrollLeft(???); 
      }  

      setTimeout(function() { 
       appendDiv(formula1); 
      }, 2000); 

      window.changeIt = function() { 
       appendDiv(formula2); 
      }  
     </script> 

    </head> 

    <body> 

     <div id="results" class="results"></div> 

     <button onclick='changeIt()'/>click me</button> 

    </body> 

</html>

出典

2017-02-05 pasaba por aqui

私はこれが何をしたいと思います。基本的には、scrollWidthを取得し、それを残した属性とスクロールを減算します。これがあなたのために働くかどうか私に教えてください。

あなたはscrollWidthを取得するとき$('#results')がjQueryバージョンを返すのに対し、要素のJavaScriptバージョンを返す[0]ので$('#results')[0]を使用する必要があります。 scrollWidthはJavaScriptプロパティであり、width()はjQuery関数です。

<html> 
 
    <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
     <title>list1b</title> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
     <style> 
 
      #results { 
 
      font-size: 500%; 
 
      display: flex; 
 
      height: 4cm; 
 
      align-items: center; 
 
      overflow: auto; 
 
     </style> 
 

 
     <script> 
 
      var formula1 = "1 + 2x"; 
 
      var formula2 = "= 1 + 2y"; 
 

 
      var appendDiv = function (f) { 
 
       var newDiv = $("<div style='min-width:10cm;'>" + f + "</div>"); // this div is an example 
 
       var dstDiv = $('#results'); 
 
       dstDiv.append(newDiv); 
 
       var left = $("#results")[0].scrollWidth - $("#results").width(); 
 
       $('#results').scrollLeft(left); 
 
      } 
 

 
      setTimeout(function() { 
 
       appendDiv(formula1); 
 
      }, 2000); 
 

 
      window.changeIt = function() { 
 
       appendDiv(formula2); 
 
      } 
 
     </script> 
 
    </head> 
 

 
    <body> 
 
     <div id="results" class="results"></div> 
 

 
     <button onclick='changeIt()'/>click me</button> 
 
    </body> 
 

 
</html>

出典

2017-02-05 19:57:13

ありがとう、それはトリックを行います。 2つの説明を追加できますか？なぜ "[0]"のない "dstDiv.scrollWidth"の代わりに "dstDiv [0] .scrollWidth"と書かなければならないのか、 "dstDiv [0] .clientWidth"の代わりに "dstDiv.width（）"を使用するのがなぜでしょうか。 –

はい、私は答えにそれを加えます。 –

それが働いて得るためにあなたのコードに欠けている何かがありますが、あなたはscrollLeftプロパティの値（scrollWidth財産マイナスコンテナのwidthを取得するための計算をする必要があります）。この例では、それがどのように動作するかを理解するのに役立ちます：

HTMLコード：

<button id="add">Add div</button> 
<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div>

CSSコード：

#container { 
    font-size: 0; 
    height: 50px; 
    overflow: scroll; 
    width: 500px; 
    white-space: nowrap; 
} 

#container div { 
    background: #F00; 
    border-right: 1px solid #FFF; 
    color: #FFF; 
    display: inline-block; 
    font-size: 14px;  
    height: 100%; 
    line-height: 50px; 
    text-align: center; 
    width: 250px; 
}

のjQueryコード：

var cont = $("#container"); 
var button = $("#add"); 

button.on("click", function() { 

    cont.append("<div>" + (cont.find("div").length + 1) + "</div>"); 

    scrollContainer(); 

}); 

function scrollContainer() { 

    var available = cont[0].scrollWidth - cont.width(); 

    cont.animate({scrollLeft: available}, 500); 

} 

scrollContainer();

Here you have a jsfiddleのコード例を示します。

出典

2017-02-05 20:01:22 ElChiniNet

divを追加して右にスクロール

答えて

関連する問題