Когда я использовал клавишу Tab, вопрос горизонтальной прокрутки

Question

Я использовал клавишу табуляции для ввода значений, выравнивание пропущено и прокрутка не перемещена Я использовал таблицы с фиксированными заголовками и горизонтальная прокрутка работает нормально, но когда я использовал клавишу табуляции для ввода данных, горизонтальная прокруткане перемещается, выравнивание ячеек таблицы пропущено

$('.pane-hintervinientes').scroll(function() {
        	  $('.pane-vintervinientes').width($('.pane-hintervinientes').width() + $('.pane-hintervinientes').scrollLeft());
        	});

<div style="width: 750px !important;">
	
			
			   <div class="pane pane--table1">
			   <div class="pane-hintervinientes theadscroll" style="margin-left:12px;">

				<table class="scrolltable">
				  <thead>
							<tr>
								<th>Tipo de Documento</th>
								<th>Número de Documento</th>
								<th>Nombre o Razón Social</th>
								<th>Apellido Paterno</th>
								<th>Apellido Materno</th>
								<th>Relación</th>
								<th>Fecha de Nacimiento/Fecha de Inicio de Actividades</th>
								<th>Agregar O Eliminar</th>
							</tr>
				  </thead>
				</table>

				<div class="pane-vintervinientes tbodyscroll">
				  <table class="scrolltable">
					<tbody>
							  <tr>
													
								<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 80%"><input type="button" value="Lr" class="buttonsinline LrButton">
								</td>					
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
										
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
														
											<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
				  <td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 81%;"  id="datepicker1" >
								</td>
				  <td>

									<div><input type="button" value="+" style="width:20px;margin-left:35px">
             					   <input type="button" value="-" style="width:20px;margin-left:10px"></div>
             					</td>
								
							</tr>
							
						
					</tbody>
				  </table>
				</div>
			  </div>
			</div>
			</div>

 $('.pane-hintervinientes').scroll(function() {
	  $('.pane-vintervinientes').width($('.pane-hintervinientes').width() + $('.pane-hintervinientes').scrollLeft());
	});

* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}
.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}
.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}
.pane--table2 th, .pane--table2 td {
  width: auto;
  min-width: 160px;
}
.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}
.pane--table2 thead {
    display: table-row;
}

<div style="width: 750px !important;">
	
			
			   <div class="pane pane--table1">
			   <div class="pane-hintervinientes theadscroll" style="margin-left:12px;">

				<table class="scrolltable">
				  <thead>
							<tr>
								<th>Tipo de Documento</th>
								<th>Número de Documento</th>
								<th>Nombre o Razón Social</th>
								<th>Apellido Paterno</th>
								<th>Apellido Materno</th>
								<th>Relación</th>
								<th>Fecha de Nacimiento/Fecha de Inicio de Actividades</th>
								<th>Agregar O Eliminar</th>
							</tr>
				  </thead>
				</table>

				<div class="pane-vintervinientes tbodyscroll">
				  <table class="scrolltable">
					<tbody>
							  <tr>
													
								<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 80%"><input type="button" value="Lr" class="buttonsinline LrButton">
								</td>					
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
										
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
														
											<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
				  <td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 81%;"  id="datepicker1" >
								</td>
				  <td>

									<div><input type="button" value="+" style="width:20px;margin-left:35px">
             					   <input type="button" value="-" style="width:20px;margin-left:10px"></div>
             					</td>
								
							</tr>
							
						
					</tbody>
				  </table>
				</div>
			  </div>
			</div>
			</div>

Выравнивание выполнено хорошо и перемещайте hotizental scrool bar

Answer 1

Функциональность замороженных столбцов реализуется путем скрытия «реальной» полосы прокрутки RadGrid (используемой для прокрутки со статическими заголовками) и использования «поддельной», которая вызывает скрытие и отображение некоторых столбцов в зависимости от положения полосы прокрутки. Однако, когда вы начинаете вкладывать текстовые поля, вы начинаете прокручивать всю область данных RadGrid, включая замороженные столбцы. Другими словами, это то же самое, что прокрутка «настоящей» скрытой полосы прокрутки. Это причина, по которой вкладка и прокрутка в замороженном состоянии не поддерживаются.

Однако есть обходной путь, который работает в нескольких сценариях. Следует помнить, что это нестандартный код, который не универсален и не будет работать во всех сценариях: но это может помочь вам это пример функции

function OnGridCreated(sender, args)
{
    var frozenScroll = $get(sender.get_id() + "_Frozen");
    var allColumns = sender.get_masterTableView().get_columns();
    var scrollLeftOffset = 0;
    var allColumnsWidth = new Array;
    var grid = sender.get_element();
    for (var i = 0; i < allColumns.length; i++)
    {
        allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
    }

    $get(sender.get_id() + "_GridData").onscroll = function (e)
    {
        for (var i = 0; i < allColumns.length; i++)
        {
            if (!allColumns[i].get_visible())
            {
                scrollLeftOffset += allColumnsWidth[i];
            }
            if ($telerik.isIE7)
            {
                var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];
                if (thisColumn.style.display == "none")
                {
                    scrollLeftOffset += parseInt(thisColumn.style.width);
                }
            }
        }
        var thisScrollLeft = this.scrollLeft;
        if (thisScrollLeft > 0)
            frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 300;
        this.scrollLeft = 0;
        scrollLeftOffset = 0;
    }
}