使网页主体可滚动

Question

我用JavaScript创建了一个表格：

t=document.getElementById('tabby');

for(var k=1; k<=100; k++)
{
t.innerHTML+="<tr> <td> hello </td> </tr>";
}   

事实上，此页面不可滚动。（这很合理。当页面加载时，表格实际上不存在。）

为了解决这个问题，我尝试在表格形成后将body的溢出设置为滚动。

document.getElementById('body').setAttribute('style', 'overflow:scroll;');

但是它没有起到帮助作用。(当然，body的id是"body"，表格的id是"tabby")

我该怎么办？

谢谢。

编辑：

糟糕。看起来我在表格样式中放置的position: absolute;引起了问题。

https://jsfiddle.net/t66dp7oc/

如果我需要absolute定位，并且页面可以滚动，我该怎么做呢？

- Yarin_007

---

侧面注意：不要像那样在循环中更新innerhtml。这会强制重新绘制/重建DOM树。将HTML构建为简单字符串，然后一次性放入.innerhtml中。 - Marc B

我认为你可能需要将这个溢出给表格的父元素，它是直接在 body 中吗？ - divy3993

@MarcB 绝妙的建议，谢谢！ - Yarin_007

@divy3993 这是主体部分。我已经尝试将 "overflow:scroll" 放在几乎所有元素中。 - Yarin_007

@Yarin_007 taxicala的回答非常正确。如果你犯了这个错误，尝试一下应该会起作用。 - divy3993

Answer 1

我可能没有完全理解你的问题，但这是你可以尝试在表格中做的事情。这似乎是我认为最好的解决方案。只需尝试在循环外创建变量：

function tableCreate() {
    var body = document.getElementsByTagName('body')[0];
    var tbl = document.createElement('table');
    tbl.style.width = '100%';
    tbl.setAttribute('border', '1');
    var tbdy = document.createElement('tbody');
    for (var i = 0; i < 3; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < 2; j++) {
            if (i == 2 && j == 1) {
                break
            } else {
                var td = document.createElement('td');
                td.appendChild(document.createTextNode('\u0020'))
                i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
                tr.appendChild(td)
            }
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl)
}

- parthpar

Answer 2

overflow属性不适用于表格。

因此，您可以将表格的display更改为block或inline-block：

table {
  display: block;
  overflow: scroll;
}

请注意，这可能会破坏某些表格功能。

var t = document.createElement('table'),
    tr = document.createElement('tr');
tr.innerHTML = '<td>Hello</td>';
for(var i=0; i<100; ++i)
  t.appendChild(tr.cloneNode(true));
document.body.appendChild(t);

table {
  display: block;
  overflow: scroll;
  height: 100px;
}

- Oriol

Answer 3

我搞定了。

我所要做的就是用 div 包装表格，并给 div 设置绝对定位属性。至于表格，我已经给它设置了相对定位属性。完美解决。

- Yarin_007

Answer 4

你应该这样做：

document.body.setAttribute('style', 'overflow:scroll;');

- taxicala

Answer 5

试试这个。

var tableRows = '';
for (var i = 0; i <= 100; i++) {
  tableRows += "<tr> <td> hello </td> </tr>";
}
var tabby = document.getElementById('tabby');
tabby.innerHTML = tableRows;

此外，我建议在类似这样的任务中使用jQuery。它会让事情变得更容易。

- Stephan Genyk