追加div並滾動到右邊

我需要在父div中現有的末尾添加新的div，並滾動到右側以便始終查看最後添加的內容。然而，我所有使用jQueryscrollLeft的嘗試都失敗了（注意：使用jQuery不是強制性的，特別是沒有它的解決方案是受歡迎的）。追加div並滾動到右邊

這是例子：

<!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因爲[0]回報JavaScript版本的元素時，而$('#results')返回jQuery版本使用$('#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

非常感謝，它的確有用。請你能補充兩點說明嗎？爲什麼需要編寫「dstDiv [0] .scrollWidth」而不是「」dstDiv.scrollWidth「而不使用」[0]「;爲什麼使用」dstDiv.width（）「而不是」dstDiv [0] .clientWidth「。 –

是的，我會將其添加到答案中。 –

有東西丟失在代碼中得到它的工作，你需要進行計算得到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並滾動到右邊

回答

相關問題