当我使用 Tab 键水平滚动问题时
Posted
技术标签:
【中文标题】当我使用 Tab 键水平滚动问题时【英文标题】：When I used Tab key Horizontal Scroll issue 【发布时间】：2019-09-28 05:07:55 【问题描述】：我使用 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>对齐良好，移动热动滚动条
【问题讨论】：
您说当使用 TAB 键从一个输入而不是另一个输入移动时，滚动不会“移动”？我无法复制：jsfiddle.net/b39g0wkf codepen.io/springborg/pen/MvPmPP 看看这个 在该示例中，您没有任何表单元素。 （输入/按钮/选择等）。所以当然选项卡不起作用。when I used tab key for entering data 如果您没有任何输入例如，您在哪里输入该数据？
在 url 上方输入第一个表并检查一次
【参考方案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;
【讨论】：
以上是关于当我使用 Tab 键水平滚动问题时的主要内容，如果未能解决你的问题，请参考以下文章