如何解决IE 10 +和IE Edge闪烁滚动问题

时间：2018-11-14 06:18:38

标签： jquery html css

我想要一个简单的响应式固定标头表。

我几乎创建了一个固定的标题表，但是IE 10+和IE Edge中存在闪烁的问题。请帮助我解决问题。

这么多的代码有可能吗？ 这是代码

预期结果：滚动时冻结标题，而没有任何闪烁或跳转 浏览器支持-IE 10 +

HTML 

$(".custom-table-scroll").scroll(function() {
    $('.freeze-top').css({
        transform: 'translateY(' + 1 * this.scrollTop + 'px)'
    });
});
body {
    width: 100%;
    filter: grayscale(0%);
}

.container {
    /*max-width: 820px;*/
    margin: 20px;
}

.custom-table-wrap {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.custom-table-wrap .custom-table-scroll {
    width: 100%;
    overflow: auto;
    max-height: 400px;
}

.custom-table-wrap.has-freezing {
    overflow: hidden;
}


.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {

    z-index: 10;
    background: red !important;
    color: #fff;

}

.custom-table-wrap.has-freezing .freeze-top {
    z-index: 11;
}

.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
    z-index: 12;
}

.custom-table-wrap.has-freezing .freeze-both {
    z-index: 13;
    background: blue;

}

/* Default Table Style */

.custom-table {
    color: #333;
    background: white;
    font-size: 12pt;
    margin: 0 auto;
    width: 100%;
    border: none;
    border-spacing: 0;
    border-collapse: separate;
    opacity: .8;
    position: relative;
}

.custom-table th,
.custom-table td {
    padding: 4px 8px;
    min-width: 100px;
    height: 36px;
    word-wrap: break-word;
    font-size: 13px;
    line-height: normal;
}

.custom-table th {
    color: #fff;
    background: #6F7E95;
    position: relative;
    font-weight: 600;
}

.custom-table td {
    font-weight: 500;
}

.custom-table tr.disabled-user td {
    font-style: italic;
    color: rgba(53, 65, 79, 0.5);
}

.custom-table tr.disabled-user td .profile-img {
    opacity: .5;
}

.custom-table.striped tr:nth-child(odd) td {
    background-color: #fff;
}

.custom-table.striped tr:nth-child(even) td {
    background-color: #e6f1f1;
}

.custom-table.bordered th,
.custom-table.bordered td {
    border-bottom: 1px solid #8F939E;
    border-right: 1px solid #8F939E;
}

.custom-table.bordered td {
    border-color: #6F7E95;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<span id="current"></span>

<div class="custom-table-wrap has-freezing">
    <div class="custom-table-scroll">
        <table class="custom-table striped">
            <thead>
                <tr>
                    <th class="freeze-top">Col 1</th>
                    <th class="freeze-top">Col 2</th>
                    <th class="freeze-top">Col 3</th>
                    <th class="freeze-top">Col 4</th>
                    <th class="freeze-top">Col 5</th>
                    <th class="freeze-top">Col 6</th>
                    <th class="freeze-top">Col 7</th>
                    <th class="freeze-top">asdsdddddddd</th>
                    <th class="freeze-top">Col 9</th>
                    <th class="freeze-top">Col 13</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr>
                    <td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
                </tr>
                <tr>
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>

                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
                <tr class="duplicate">
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                    <td>Col 5</td>
                    <td>Col 6</td>
                    <td>Col 7</td>
                    <td>Col 8</td>
                    <td>Col 9</td>
                    <td>Col 13</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

0 个答案:

没有答案
相关问题
最新问题