css - 使用 CSS 滚动

Question

我有4个需要滚动的表格，它们的设置如下:

1. 表 1(静态)
2. Table2(水平滚动)
3. Table3(垂直滚动)
4. Table4(水平和垂直滚动)

Table1   Table2Table3   Table4

The tricky part of this is that Table 3 and 4 need to keep in sync as this is a listing of data broken out into two tables. Table 2 and 4 are in the same situation.

Any ideas?

No Javascript please as we have a script that works, but it is far too slow to work.

Thanks.

EDIT:

var tables = new Array();
var headerRowDivs = new Array();
var headerColumnDivs = new Array();
var bodyDivs = new Array();
var widths = new Array();
var heights = new Array();
var borderHorizontals = new Array();
var borderVerticals = new Array();
var tableWidths = new Array();
var tableHeights = new Array();
var arrayCount = 0;
var paddingTop = 0;
var paddingBottom = 0;
var paddingLeft = 0;
var paddingRight = 0;


function ScrollTableAbsoluteSize(table, width, height)
{
    ScrollTable(table, null, null, width, height);
}

function ScrollTableRelativeSize(table, borderHorizontal, borderVertical)
{
    ScrollTable(table, borderHorizontal, borderVertical, null, null);
}

function ScrollTable(table, borderHorizontal, borderVertical, width, height)
{
    var childElement = 0;
    if (table.childNodes[0].tagName == null)
    {
        childElement = 1;
    }

    var cornerDiv = table.childNodes[childElement].childNodes[0].childNodes[childElement].childNodes[childElement];
    var headerRowDiv = table.childNodes[childElement].childNodes[0].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];
    var headerColumnDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[childElement].childNodes[childElement];
    var bodyDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];

    tables[arrayCount] = table;
    headerRowDivs[arrayCount] = headerRowDiv;
    headerColumnDivs[arrayCount] = headerColumnDiv;
    bodyDivs[arrayCount] = bodyDiv;
    borderHorizontals[arrayCount] = borderHorizontal;
    borderVerticals[arrayCount] = borderVertical;
    tableWidths[arrayCount] = width;
    tableHeights[arrayCount] = height;
    ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv);  

    widths[arrayCount] = bodyDiv.offsetWidth;
    heights[arrayCount] = bodyDiv.offsetHeight;
    arrayCount++;
    ResizeScrollArea();

    bodyDiv.onscroll = SyncScroll;
    if (borderHorizontal != null)
    {
        window.onresize = ResizeScrollArea;
    }
}

function ResizeScrollArea()
{
    var isIE = true;
    var scrollbarWidth = 17;
    if (!document.all)
    {
        isIE = false;
        scrollbarWidth = 19;
    }

    for (i = 0; i < arrayCount; i++)
    {
        bodyDivs[i].style.overflow = "scroll";
        bodyDivs[i].style.overflowX = "scroll";
        bodyDivs[i].style.overflowY = "scroll";
        var diffWidth = 0;
        var diffHeight = 0;
        var scrollX = true;
        var scrollY = true;

        var columnWidth = headerColumnDivs[i].offsetWidth;
        if (borderHorizontals[i] != null)
        {
            var width = document.documentElement.clientWidth - borderHorizontals[i] - columnWidth;
        }
        else
        {
            var width = tableWidths[i];
        }

        if (width > widths[i])
        {
            width = widths[i];
            bodyDivs[i].style.overflowX = "hidden";
            scrollX = false;
        }

        var columnHeight = headerRowDivs[i].offsetHeight;
        if (borderVerticals[i] != null)
        {
            var height = document.documentElement.clientHeight - borderVerticals[i] - columnHeight;
        }
        else
        {
            var height = tableHeights[i];
        }

        if (height > heights[i])
        {
            height = heights[i];
            bodyDivs[i].style.overflowY = "hidden";
            scrollY = false;
        }

        headerRowDivs[i].style.width = width + "px";
        headerRowDivs[i].style.overflow = "hidden";
        headerColumnDivs[i].style.height = height + "px";
        headerColumnDivs[i].style.overflow = "hidden";
        bodyDivs[i].style.width = width + scrollbarWidth + "px";
        bodyDivs[i].style.height = height + scrollbarWidth + "px";

        if (!scrollX && isIE)
        {
            bodyDivs[i].style.overflowX = "hidden";
            bodyDivs[i].style.height = bodyDivs[i].offsetHeight - scrollbarWidth + "px";
        }
        if (!scrollY && isIE)
        {
            bodyDivs[i].style.overflowY = "hidden";
            bodyDivs[i].style.width = bodyDivs[i].offsetWidth - scrollbarWidth + "px";
        }
        if (!scrollX && !scrollY && !isIE)
        {
            bodyDivs[i].style.overflow = "hidden";
        }
    }
}

function ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv)
{
    var childElement = 0;
    if (table.childNodes[0].tagName == null)
    {
        childElement = 1;
    }

    SetWidth(
        cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
        headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[0]);

    SetHeight(
        cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
        headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement]);

    var headerRowColumns = headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
    var bodyColumns = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
    for (i = 0; i < headerRowColumns.length; i++)
    {
        if (headerRowColumns[i].tagName == "TD" || headerRowColumns[i].tagName == "TH")
        {
            SetWidth(
                headerRowColumns[i], 
                bodyColumns[i], 
                i == headerRowColumns.length - 1);
        }
    }

    var headerColumnRows = headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes;
    var bodyRows = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes;
    for (i = 0; i < headerColumnRows.length; i++)
    {
        if (headerColumnRows[i].tagName == "TR")
        {
            SetHeight(
                headerColumnRows[i].childNodes[0],
                bodyRows[i].childNodes[childElement],
                i == headerColumnRows.length - 1);
        }
    }
}

function SetWidth(element1, element2, isLastColumn)
{
    // alert(element2 + "\n\n" + element2.offsetWidth);
    var diff = paddingLeft + paddingRight;

    if (element1.offsetWidth < element2.offsetWidth)
    {
        element1.childNodes[0].style.width = element2.offsetWidth - diff + "px";
        element2.childNodes[0].style.width = element2.offsetWidth - diff + "px";
    }
    else
    {
        element2.childNodes[0].style.width = element1.offsetWidth - diff + "px";
        element1.childNodes[0].style.width = element1.offsetWidth - diff + "px";
    }
}

function SetHeight(element1, element2, isLastRow)
{
    var diff = paddingTop + paddingBottom;

    if (element1.offsetHeight < element2.offsetHeight)
    {
        element1.childNodes[0].style.height = element2.offsetHeight - diff + "px";
        element2.childNodes[0].style.height = element2.offsetHeight - diff + "px";
    }
    else
    {
        element2.childNodes[0].style.height = element1.offsetHeight - diff + "px";
        element1.childNodes[0].style.height = element1.offsetHeight - diff + "px";
    }
}

function SyncScroll()
{
    for (i = 0; i < arrayCount; i++)
    {
        headerRowDivs[i].scrollLeft = bodyDivs[i].scrollLeft;
        headerColumnDivs[i].scrollTop = bodyDivs[i].scrollTop;
    }
}

我们从 this link. 得到代码

希望对您有所帮助。

就目前而言，代码过于庞大，无法处理我们需要的数据量。我们每个月大约有 5000 行数据需要显示在页面上。

Answer 1

如果“需要保持同步”是指当您滚动其中一个时，另一个也会滚动，您不能使用 CSS 执行此操作，因为您无法使用 CSS 操纵滚动位置。

还有一件事，请记住，IE 中的滚动条位于元素内部并与该元素重叠 20px(对此有一个解决方法)，而在所有其他浏览器中，滚动条位于元素外部。