Javascript 水平数据更新在滚动上不起作用

我有一个大数组，我需要把它渲染成一个表。我不是渲染所有项目，而是水平和垂直渲染少数项目。然后在滚动上根据鼠标滚动是否发生垂直/水平更新表值。但我在这方面有两个问题

我的代码有以下问题

水平滚动时，数据不会更新

水平滚动也会使屏幕闪烁

水平元素未正确对齐

这里是jsbin链接

这是JS代码，我知道代码不干净，但我稍后会清理它

var $matrix = (function () {
function $matrix(data, holder, hidescrollbar, config) {
    var header_h = config.header || "150px";
    var data_h = config.header || "90px";
    !data && (function () {
        // Fake Data, will be removed later
        data = new Array(50000);
        for (var i = 0, l = data.length; i < l; i++) {
            var dummy = Math.random().toString(36).substring(5);
            var dum = [];
            for (var j = 0; j < 26; j++) {
                dum.push(dummy + i);
            }
            data[i] = dum;
        }
    }());
    hidescrollbar = hidescrollbar || false;
    var heightForcer = holder.appendChild(document.createElement('div'));
    heightForcer.id = "heightForcer";
    var view = null;
    //get the height of a single item
    var dimensions = (function () {
        //generate a fake item and calculate dimensions of our targets
        var div = document.createElement('div');
        div.style.height = "auto";
        div.innerHTML = "<div class='rowHeader'>fake</div><div class='rowData'>fake</div>";
        holder.appendChild(div);
        var output = {
            row: div.firstChild.offsetHeight,
            header: div.firstChild.offsetWidth,
            data: div.lastChild.offsetWidth
        }
        holder.removeChild(div);
        return output;
    })();

    function refreshWindow() {
        //remove old view
        if (view != null) {
            view.innerHTML = "";
        } else {
            //create new view
            view = holder.appendChild(document.createElement('div'));
        }
        var firstItem = Math.floor(holder.scrollTop / dimensions.row);
        var lastItem = firstItem + Math.ceil(holder.offsetHeight / dimensions.row) + 1;
        if (lastItem + 1 >= data.length) lastItem = data.length - 1;

        var hfirstItem = Math.floor(holder.scrollLeft / dimensions.data);
        var hlastItem = hfirstItem + Math.ceil(holder.offsetWidth / dimensions.data) + 1;
        if (hlastItem + 1 >= data[firstItem].length) hlastItem = data[firstItem].length - 1;

        //position view in users face
        view.id = 'view';
        view.style.top = (firstItem * dimensions.row) + 'px';
        view.style.left = (hfirstItem * dimensions.data) + 'px';
        var div;
        //add the items
        for (var index = firstItem; index <= lastItem; ++index) {
            div = document.createElement('div');
            var curData = data[index].slice(hfirstItem, hlastItem);
            div.innerHTML = '<div class="rowHeader">' + 
              curData.join('</div><div class="rowData">') +
            "</div>";
            div.className = "listItem";
            div.style.height = dimensions.row + "px";
            view.appendChild(div);
        }
        console.log('viewing items ' + firstItem + ' to ' + lastItem);
    }
    heightForcer.style.height = (data.length * dimensions.row) + 'px';
    heightForcer.style.width = (data[0].length * dimensions.data) + 'px';
    if (hidescrollbar) {
        //work around for non-chrome browsers, hides the scrollbar
        holder.style.width = (holder.offsetWidth * 2 - view.offsetWidth) + 'px';
    }
    refreshWindow();

    function delayingHandler() {
        //wait for the scroll to finish
        //setTimeout(refreshWindow, 10);
        refreshWindow();
    }
    if (holder.addEventListener) holder.addEventListener("scroll", delayingHandler, false);
    else holder.attachEvent("onscroll", delayingHandler);
}
return $matrix;
 }());

new $matrix(undefined, document.getElementById('listHolder'), false, {
  header: "150px",
  data: "90px",
  headerColumns: 2
});

var$matrix=（函数（）{
函数$matrix（数据、持有者、隐藏滚动条、配置）{
var header_h=config.header | |“150px”；
var data_h=config.header | |“90px”；
！数据&&（函数（）{
//假数据，稍后将被删除
数据=新阵列（50000）；
对于（变量i=0，l=data.length；i=data.length）lastItem=data.length-1；
var hfirstItem=数学地板（holder.scrollLeft/dimensions.data）；
var hlastItem=hfirstItem+Math.ceil（holder.offsetWidth/dimensions.data）+1；
如果（hlastItem+1>=data[firstItem].length）hlastItem=data[firstItem].length-1；
//在用户脸上定位视图
view.id='view'；
view.style.top=（firstItem*dimensions.row）+“px”；
view.style.left=（hfirstItem*dimensions.data）+“px”；
var-div；
//添加项目
对于（var index=firstItem；index问题在于，您正在将
挂接到
#foo
上的
事件，但没有意识到
#foo
只与它包含的数据一样大。如果您进行以下更改（即，使用
#wrapper
而不是
#foo
）

您会注意到该值确实得到了更新。
我注意到您的jsbin示例已被稍微修改，并且正在使用wheelDelta属性。这就是为什么您无法区分水平更新和垂直更新。您需要使用
wheelDeltaX
和
wheelDeltaY
，这将是一个值或零，这取决于用户是垂直滚动还是水平滚动

另外，使用mousewheel事件时要小心，它不符合标准，因此可能会再次困扰您。可能值得查看JQuery源代码以了解
scroll（）是如何运行的
方法实现这些处理程序。我可以想象有一个计时器监控元素的滚动偏移量，当对象滚动时触发合成事件。但这完全是胡乱猜测。正如我所说，您最好看看它。
，一个类似问题的概念扩展

代码

功能矩阵（数据、支架、配置）{
"严格使用",；
//复制配置，替换默认值
配置={
cellWidth：（config&&config.cellWidth）| | 150，
行高：（config&&config.rowHeight）| 22，
};
如果（！数据）{
//为数据创建50000x26数组
数据=（函数（长度、深度）{
var输出=新数组（长度）；
var startAt；
对于（var指数=0；指数<长度；++指数）{
//var startAt=Math.random（）.toString（36）子字符串（5）；
var startAt=index+'：'；
输出[索引]=新数组（深度）；
对于（var index2=0；index2data.length）
lastRow=data.length-1；
var firstColumn=Math.floor（holder.scrollLeft/config.cellWidth）；
var lastColumn=firstColumn+Math.ceil（holder.offsetWidth/config.cellWidth）+1；
如果（lastColumn+2>数据[0]。长度）
lastColumn=数据[0]。长度-1；
//立场六
var listHold = document.getElementById('wrapper');