CODEWITHSUNDEEP
javascripthtmlgoogle-chromescrollyui
mark
mark

Reputation: 62736

Figuring out the culprit for HTML content scrolling in Chrome

This is the jsFiddle - http://jsfiddle.net/75Rqe/8/

Unfortunately, I could not reduce it to a minimal example, so it contains quite a lot of code.

It is a stripped down version of a mixin I wrote for the YUI3 Datatable to implement inplace edit.

First the problem:

  1. Load the jsFiddle
  2. Scroll the table down until the row with dnum 26 is the last visible row in the table: enter image description here (there is nothing special about 26, just for the sake of the example)
  3. Now click the dnum field of this row and change 26 to something else: enter image description here
  4. Finally press the tab key: enter image description here

If you are using Chrome, then the table is auto scrolled on tab to show the modified row right in the middle of the table.

No such thing happens on Firefox or IE9: enter image description here

I understand that it is unfair to expect from anyone to analyze the code of jsFiddle, so my question is how can I troubleshoot this thing? I was trying to place breakpoints in various "obvious" places using the Chrome development tools - no dice. The content scrolls and no breakpoint is ever hit.

Can I break when the scroll event occurs?

In short, I am pretty desperate (debugging Chrome with windbg already crossed my sick mind).

Any feedback is welcome.

EDIT

OK, SO insists on some code, so here it is:

YUI.add('dt-inplace-edit',
  function (Y) {
    "use strict";
    ...

    function DataTableInplaceEdit() {
    }

    DataTableInplaceEdit.prototype = {
    ...
    };

    Y.DataTable.InplaceEdit = DataTableInplaceEdit;
  }, '0.1', {requires: ['node']});


YUI({filter: 'raw', debug: true, combine: false}).use("datatable", "node", 'datatable-scroll',
  'dt-inplace-edit',
    function(Y) {
    var i, table, data =[
       {dnum:100, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:101, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:102, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:103, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:104, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:105, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:106, dint:7, dtxt:"Test 7 string", dname:"Lara"},
       {dnum:107, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:108, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:109, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:110, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:111, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:112, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:113, dint:7, dtxt:"Test 7 string", dname:"Lara"}
    ];

    Y.Base.mix(Y.DataTable, [Y.DataTable.InplaceEdit]);

    data = data.concat(data.concat(data));
    for (i = 0; i < data.length; i += 1) {
        data[i] = Y.merge(data[i]);
        data[i].dnum = i;
    }

    Y.one('body').addClass("yui3-skin-sam");               
    table = new Y.DataTable({
        columns:[ 'dnum', 'dint', 'dtxt', 'dname' ],
        data: data,
        height: '15em',
        width: '100%',
        scrollable: 'y',
    }).render('#dt');
});

Upvotes: 1

Views: 1096

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

When you tab to an element, it seems that chrome scrolls the element into the middle of the container, where as in FF and IE, it seems to do the default behavior of scrollIntoView(), which is to align it to the bottom

See this example (in Chrome and FF/IE). It should help you understand the problem. Try tabbing after you clicked the first anchor in the scroll container, and also try clicking the buttons that call scrollIntoView directly

I particularly prefer Chrome's behavior, but I don't think there's much you can do about it, besides calling scrollIntoView yourself after uses hits tab (and cancelling the tab's default behavior with e.preventDefault)

Here's an implementation where tabbing through the links doesn't move items into the middle when tabbing them

Upvotes: 1

Related Questions