jquery - 当我使用 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>

对齐好，移动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;
    }
}