Добавить div и прокрутить вправо

Мне нужно добавить новый div в конец существующих в родительском div и прокрутить вправо, чтобы всегда видеть последние добавочные.Добавить div и прокрутить вправо

Однако все мои попытки с использованием jQueryscrollLeft потерпели неудачу (примечание: использование jQuery не является обязательным, в частности, решения без него приветствуются).

Это пример:

<!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 и вычитает атрибуты и прокрутки, что осталось. Дайте мне знать, если это сработает для вас.

Вы должны использовать $('#results')[0] при получении scrollWidth потому что [0] возвращение версии элемента JavaScript тогда $('#results') возвращает версию jQuery. 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 и прокрутить вправо

ответ

Смежные вопросы