追加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并滚动到右边

回答

相关问题