如何防止在Chrome上點擊標題時滾動表格？

Question

我有一些代碼來繪製一個固定的表頭。但Chrome瀏覽器的滾動存在問題。

首先：將卷軸拉到底部。

第二：單擊表格標題上的任意位置，滾動將運行到頂部。

我試過用css -webkit-user-select: none;，但它只適用於IE。

我不想更改html代碼，如<div>或<table>。

如何在點擊標題時防止滾動？

HTML

<div id="scrollerBox"> 
    <div id="weeklyShifts"> 
     <table class="scrollContent"> 
      <thead> 
       <tr> 
        <th>a01</th> 
        <th>a02</th> 
        <th>a03</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <div id="scheduleShifts"> 
     <table class="scrollContent"> 
      <tbody> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
       <tr> 
        <td>b01</td> 
        <td>b01</td> 
        <td>b01</td> 
       </tr> 
       <tr> 
        <td>b02</td> 
        <td>b02</td> 
        <td>b02</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

CSS

#scrollerBox { 
    width: 360px; 
    height: 150px; 
    overflow: scroll; 
    margin-top: 60px; 
} 
#weeklyShifts { 
    border-bottom: solid 1px #cfcfcf; 
} 
#weeklyShifts table { 
    border-spacing: 0px; 
    border-collapse: collapse; 
} 
#weeklyShifts tr:first-child { 
    border-bottom: solid 1px #333333; 
} 
#scheduleShifts table { 
    width: 100%; 
    border-spacing: 0px; 
    border-collapse: collapse; 
} 
#scheduleShifts tr { 
    border: solid 1px #cfcfcf; 
    border-top: none; 
    border-left: none; 
} 
table.scrollContent tr { 
    border: solid 1px #cfcfcf; 
    border-left: none; 
} 
#weeklyShifts table th:nth-child(1), 
#scheduleShifts table th:nth-child(1) { 
    width: 100px; 
    min-width: 100px; 
    border-right: solid 1px #cfcfcf; 
} 
#weeklyShifts table th:nth-child(2), 
#scheduleShifts table td:nth-child(2) { 
    width: 100px; 
    min-width: 100px; 
} 
#weeklyShifts table th:nth-child(3), 
#scheduleShifts table td:nth-child(3) { 
    width: 100px; 
    min-width: 100px; 
} 
#weeklyShifts table thead th { 
    height: 50px; 
    font-size: 0.88em; 
    font-weight: normal; 
    background-color: #ffffff; 
    padding: 0.4em; 
    border: solid 1px #cfcfcf; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 
#weeklyShifts table thead th span { 
    display: block; 
} 
#weeklyShifts table thead th span.term { 
    float: left; 
} 
#scheduleShifts table tbody th { 
    height: 54px; 
    font-size: 1em; 
    font-weight: normal; 
    text-align: left; 
    line-height: 1.28em; 
    background-color: #ffffff; 
    padding: 0.8em 0.4em; 
} 
#scheduleShifts table td { 
    font-size: 0.88em; 
    font-weight: normal; 
    padding: 0.32em; 
    border: solid 1px #cfcfcf; 
} 
#scheduleShifts table td span { 
    display: block; 
} 
#scheduleShifts table td span.sub { 
    color: #c0c0c0; 
    font-size: 11px; 
} 
#weeklyShifts table th:first-child span + span { 
    display: inline-block; 
    width: auto; 
} 
#scheduleShifts tbody th:first-child { 
    display: block; 
    position: relative; 
} 
table.scrollContent thead { 
    position: absolute; 
    top: 0; 
    left: 5px; 
    z-index: 32; 
} 

The code is here

Answer 1

恐怕這是Chrome的正確行爲。

例如，this代碼也會發生同樣的問題。在Firefox或IE中，行爲是不同的。

無論如何，您可以處理mousedown事件並阻止它，以免將事件通知給父處理程序。

如果你可以使用jQuery，這是代碼來實現這一點：你有這個想法已經實現

$("div#weeklyShifts").mousedown(function(e){ 
    e.stopPropagation(); 
    alert("here!"); // just to test 
}); 

Here。

您也可以嘗試將pointer-events財產在你的CSS #weeklyShifts ID設置爲none：

#weeklyShifts { 
    border-bottom: solid 1px #cfcfcf; 
    pointer-events: none; 
} 

見的完整代碼here。