当我使用 Tab 键水平滚动问题时

Question

我使用 tab 键输入值，对齐丢失并且滚动未移动我使用带有固定标题和水平滚动的表格工作正常，但是当我使用 tab 键输入数据时水平滚动不移动，表格单元格对齐错过了

$('.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>

对齐良好，移动热动滚动条

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;
    }
}