对角溢出滚动不适用于 chrome 和 opera答案

【问题标题】：Diagonal overflow scroll not working on chrome nor opera对角溢出滚动不适用于 chrome 和 opera
【发布时间】：2016-04-02 06:50:25
【问题描述】：

具有设定尺寸（常数）的容器（div），隐藏溢出（表）。对角滚动在 Firefox 和 safari 上运行良好，但 chrome 和 opera 不能同时滚动两个维度。为什么？

小提琴： https://jsfiddle.net/coolcatDev/kd75zyzk/1/

html:(为简单起见只有一行->没有y-overflow)

 <div class="wrap">
 <table>
 <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
        <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
        <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
        <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
        <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
        <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr> 
  </table>
  </div>

css:

.wrap{
  height:300px;
  width:300px;
  overflow: scroll;
}

【问题讨论】：

标签： html css google-chrome scroll cross-browser

【解决方案1】：

为您搜索了它：

Firefox 和 Chrome 对鼠标滚轮使用两种不同的 JavaScript 事件，并且 delta 属性在每个中使用不同的名称。幸运的是，在大多数情况下，有一个简单的解决方法就足够了：

// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);

// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);

function mouseWheelEvent(e) {
    var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
}

link

【讨论】：