Блог

Главная - Вопросы по программированию - Как автоматически прокручивать до последнего элемента при увеличении размера экрана

Как автоматически прокручивать до последнего элемента при увеличении размера экрана

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

У меня есть список. При нажатии на элемент рядом с ним открывается новый div. Когда он становится больше размера экрана, добавляется горизонтальная полоса прокрутки. Но я хочу сосредоточиться на последнем добавленном элементе. Каждый раз, когда добавляется элемент, экран должен прокручиваться до него. Теперь мне нужно вручную прокрутить элемент. Но он должен быть автоматически виден.

 function childData(_id) {
     var tRow = $(".organogram li").length,
      row = parseInt(_id) 1;
     for (var i = row; i <= tRow; i  ) {
         $("#dept-" i).remove();
     }
     var data =  "<li id='dept-" row "' class='team'>"
 
      "<div class='data'><ul> "
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher1</p><p class='designation'>Designation</p></div></li>"
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher2</p><p class='designation'>Designation</p></div></li>"
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher3</p><p class='designation'>Designation</p></div></li>"
      "</ul> </div></li>";
     $(".organogram").append(data);
 }
 function thisNode(_this){
     var _id = $(_this).closest(".team").attr("id").match(/d /);
        
     $(_this).closest("ul").find("li").removeClass( "active" );
     $(_this).addClass( "active" );


 $(_this).closest("ul").prepend($(_this));
     childData(_id);
 } 
 ul{
 padding:0px;
 list-style-type: none;
 }
 .data {
    float: left;
    width: 260px;
    
    margin: 10px;
    border-radius: 5px;
}
 .data a{
 text-decoration: none;
 }
 .data ul{
 list-style-type: none;
 }
 .profile{
 height: 55px;
 width: 55px;
 float: left;
 margin: 0px 13px;
 border-radius: 5px;
 }
 .details{
 font-size: 13px;
 }
 li.title {
    overflow: hidden;
    padding: 5px 0;
    cursor: pointer;
    box-shadow: 1px 5px 7px #00000024;
    margin-bottom: 17px;
    border-bottom: 3px solid #7667ff;
    background: #bdcbd026;
}
 .active{
 background:#3868d2d6 !important;
 }

 .details p {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
    font-family: Arial, sans-serif;
}
li.active.title p {
    color: white;
}
.name {
    color: #2700ff;
    font-weight: 600;
    letter-spacing: 2px;
}
.designation {
    color: #09a023;
    letter-spacing: 1px;
}

ul.organogram{
    display: flex;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="main" id="mainDiv">
         <ul class="organogram">
            <li id='dept-1' class='team'>
               <div class='data'>
                  <ul>
                     <li class='title' onclick='thisNode(this)'>
                           <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher1</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                      <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher2</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                        <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher3</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                  </ul>
               </div>
            </li>
         </ul>
      </div>

Комментарии:

1. Автоматическая горизонтальная прокрутка? Управляйте событием «resize», а затем перемещайтесь с помощью «window.scrollTo» до конца ширины страницы

Ответ №1:

Вы можете использовать document.getElementById().scrollIntoView() для прокрутки до вновь созданного элемента. вы можете вызвать эту функцию после вставки новых элементов, как показано ниже.

 function childData(_id) {
     var tRow = $(".organogram li").length,
      row = parseInt(_id) 1;
     for (var i = row; i <= tRow; i  ) {
         $("#dept-" i).remove();
     }
     var data =  "<li id='dept-" row "' class='team'>"
 
      "<div class='data'><ul> "
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher1</p><p class='designation'>Designation</p></div></li>"
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher2</p><p class='designation'>Designation</p></div></li>"
      "<li class='title' onclick='thisNode(this)'><img src='img/1.jpg' class='profile' ><div class='details'> <p class='name'>Tusher3</p><p class='designation'>Designation</p></div></li>"
      "</ul> </div></li>";
     $(".organogram").append(data);
      document.getElementById("dept-" row).scrollIntoView();
 }
 function thisNode(_this){
     var _id = $(_this).closest(".team").attr("id").match(/d /);
        
     $(_this).closest("ul").find("li").removeClass( "active" );
     $(_this).addClass( "active" );


 $(_this).closest("ul").prepend($(_this));
     childData(_id);
 } 
 ul{
 padding:0px;
 list-style-type: none;
 }
 .data {
    float: left;
    width: 260px;
    
    margin: 10px;
    border-radius: 5px;
}
 .data a{
 text-decoration: none;
 }
 .data ul{
 list-style-type: none;
 }
 .profile{
 height: 55px;
 width: 55px;
 float: left;
 margin: 0px 13px;
 border-radius: 5px;
 }
 .details{
 font-size: 13px;
 }
 li.title {
    overflow: hidden;
    padding: 5px 0;
    cursor: pointer;
    box-shadow: 1px 5px 7px #00000024;
    margin-bottom: 17px;
    border-bottom: 3px solid #7667ff;
    background: #bdcbd026;
}
 .active{
 background:#3868d2d6 !important;
 }

 .details p {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
    font-family: Arial, sans-serif;
}
li.active.title p {
    color: white;
}
.name {
    color: #2700ff;
    font-weight: 600;
    letter-spacing: 2px;
}
.designation {
    color: #09a023;
    letter-spacing: 1px;
}

ul.organogram{
    display: flex;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="main" id="mainDiv">
         <ul class="organogram">
            <li id='dept-1' class='team'>
               <div class='data'>
                  <ul>
                     <li class='title' onclick='thisNode(this)'>
                           <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher1</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                      <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher2</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                        <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p class="name">Tusher3</p>
                              <p class="designation">Designation</p>
                           </div>
                     </li>
                  </ul>
               </div>
            </li>
         </ul>
      </div>

Метки: