用于计算ScrollTop值的MouseWheel事件参数

Question

我使用了以下代码片段，并且我通过应用css（overflow-y：hidden）隐藏了垂直滚动条。

<div class="gridheadercontainer" style="width: 300px;height: 300px;overflow: scroll; overflow-y:hidden; ">
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text

        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text

        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text
        text text text text text text text text

        <!-- <table class="table" cellspacing="0">
                 <colgroup>
                     <col style="width: 150px;">
                     <col style="width: 150px;">
                     <col style="width: 150px;">
                     <col style="width: 150px;">
                     <col style="width: 150px;">
                 </colgroup>
                 <thead>
                     <tr class="columnheader" style="cursor: pointer;">
                         <th class="headercell"><div class="headercelldiv">Task name</div></th>
                         <th class="headercell"><div class="headercelldiv">Start time</div></th>
                         <th class="headercell"><div class="headercelldiv">End time</div></th>
                         <th class="headercell"><div class="headercelldiv">Duration</div></th>
                         <th class="headercell"><div class="headercelldiv">Status</div></th>
                         <th class="headercell"><div class="headercelldiv"></div></th>
                     </tr>
                 </thead>
                 <tbody class="hide"><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody>
             </table>-->
    </div>

如何从鼠标滚轮事件操作计算div的scrollTop值。

Answer 1

FIXXXXXXXXED ITTTTTTT

---

Whatr the odds, right? Check out this beautiful violin.

<强> HTML：

<h1 id="pos">SCROLL POSITION</h1>

<div class="gridheadercontainer">
    <div id="theDiv">text text text</div>
</div>

<强> CSS：

#pos {
    right: 50px;
    top: 0;
    position: fixed;
    color: red;
}
#theDiv {
    white-space:nowrap;
    overflow-x: scroll;
    width: 100%;
    height: 100%;
}
.gridheadercontainer {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 300px;
    word-wrap: break-all;
}

<强>使用Javascript：

var position = document.getElementById('pos');
var theDiv = document.getElementById('theDiv');
theDiv.onscroll = function (evt) {
    var e = evt || window.event;
    position.innerHTML = theDiv.scrollLeft + ' x ' + theDiv.scrollTop;
    e.stopPropagation();
};

我们走了。纠正和完善。

我确保证明你也不会在div之外得到滚动位置。

享受。

EDITED：这次实现完美，启用了水平滚动轮询