0
我有以下片段。我没有编写任何脚本,它是纯Css,但是当点击标题时会触发一些奇怪的事件。如果您单击向下滚动并单击标题,div容器将自动向上滚动。这是我想禁用它的不需要的事件。有人可以解释为什么吗?以及如何禁用它?为什么纯Css监听点击事件并触发滚动事件?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
table-layout: fixed;
background-color: green;
color: white;
}
.container {
height: 100px;
overflow-x:hidden;
overflow-y: auto;
border: none;
}
.section {
position: relative;
padding-top: 25px;
background-color: red;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: rgba(0, 0, 0, 0);
border: none;
white-space: nowrap;
}
.header {
broder: solid 1px black;
position: absolute;
color: black;
top:10px;
}
</style>
</head>
<body>
<div class="section">
<div class="container">
<table>
<col width="130">
<col width="80">
<tr>
<th>
Month
<div class="header">Month</div>
</th>
<th>
Savings
<div class="header">Savings</div>
</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</div>
</div>
<p>The col width attribute is not supported in HTML5.</p>
</body>
</html>
快到了,是否有可能禁用指针事件对于滚动只是因为我想以后我的JavaScript中使用这个元素 – TSR