Прокрутка с вкладками не работает в Chrome

Я обнаружил, что если я помещу элемент таблицы внутри элемента div и установлю свойства div, такие как ширина, высота и переполнение: auto; и поместите некоторый элемент ввода внутри таблицы td. чем перемещение с помощью вкладок, и обнаружил, что прокрутка не перемещается с вкладкой (если элементы ввода содержат некоторые данные). Эта проблема возникает только в Chrome, а не в других современных браузерах. Вот пример кода:

<div style="overflow: auto; height: 100px;width:400px;">
        <table >
            <tbody>
            <tr>
                <td style="width:100px;"><input value="1" type="text"/></td>
                <td style="width:100px;"><input value="2" type="text"/></td>
                <td style="width:100px;"><input value="3" type="text"/></td>
                <td style="width:100px;"><input value="4" type="text"/></td>
                <td style="width:100px;"><input value="5" type="text"/></td>
                <td style="width:100px;"><input value="6" type="text"/></td>
                <td style="width:100px;"><input value="7" type="text"/></td>
                <td style="width:100px;"><input value="8" type="text"/></td>
                <td style="width:100px;"><input value="9" type="text"/></td>
            </tr>
            </tbody>
        </table>

</div>

Я также создал ссылку на plunker:

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

Любая помощь в этом будет высоко оценена.


scroll google-chrome html html-table tabbing
person Naveen Dahiya    schedule 19.12.2014    source источник
comment
Я использую Chrome 38 на своем Mac, и все правильно прокручивается, когда я перемещаюсь по полям.   -  person kinezu    schedule 20.12.2014
comment
я использую ОС Windows-8, и похоже, что эта проблема возникает только в ОС Windows, однако я не пробовал это на Mac.   -  person Naveen Dahiya    schedule 22.12.2014
comment
Я использую Chrome 38 на компьютере с Windows 7, и он отлично работает. Это может быть специфично для Windows 8?   -  person Aeolingamenfel    schedule 22.12.2014
comment
но я столкнулся с той же проблемой на машине с Windows 7.   -  person Naveen Dahiya    schedule 24.12.2014

Ответы (2)


arrow_upward
1
arrow_downward

В Windows 8

Chrome: прокрутка с помощью TABKEY не прокручивается, чтобы правильно отображать строку за пределами области просмотра tbody.

Версия 39.0.2171.95 Версия 41.0.2257.0 Canary (64-разрядная версия) Версия 41.0.2236.0 (64-разрядная версия)

Корректно работает в IE 11 Firefox 31.0

При этом мое решение протестировано с последними версиями Chrome и IE11.

        // rowObj is javascript <tr> element object
        rowObj.addEventListener("focus", function( event ) {
        console.log("focus visible row=" + event.currentTarget.sectionRowIndex);
        if(event.currentTarget.sectionRowIndex === 0)
            detObj.scrollTop = 0;                      //detObj is javascript <td>
        else
        if(event.currentTarget.sectionRowIndex > 4)    // is the max visible rows in <tbody>
            detObj.scrollTop = 9999;                   // will focus on last row in <tbody>
    }, true);

// При необходимости я могу предоставить код javascript для расчета количества видимых строк в

person user3856491    schedule 30.12.2014
comment
на самом деле я не хочу использовать js для прокрутки, похоже, проблема с хромом, но я не уверен в этом. - person Naveen Dahiya; 16.04.2015

arrow_upward
0
arrow_downward

Возможно, попробуйте переустановить Chrome и/или попробуйте тот же код в Safari. Возможно, попробуйте мышь или трекпад, если он уже используется.

person user2045195    schedule 24.12.2014