我正在尝试创建一个记分牌，用户可以选择他们想要查看的运动。由于搜索了这个网站，我认为我已经很好地确定了这一部分 - 但我想记分板能够水平滚动。我很难将这两个功能结合起来。
这是我一直在使用的jsFiddle。
代码：
<div class="sport-select">Select sport:</div>
<div class="select-wrapper">
<select id="selectMe">
<option value="option1">Football</option>
<option value="option2">Volleyball</option>
<option value="option3">Softball</option>
<option value="option4">Boys Soccer</option>
</select>
</div>
<div id="option1" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team A</td>
<td class="score">17</td>
</tr>
<tr>
<td class="team">Team B</td>
<td class="score">14</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team C</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team D</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team E</td>
<td class="score">15</td>
</tr>
<tr>
<td class="team">Team F</td>
<td class="score">32</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team G</td>
<td class="score">28</td>
</tr>
<tr>
<td class="team">Team H</td>
<td class="score">17</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team I</td>
<td class="score">18</td>
</tr>
<tr>
<td class="team">Team J</td>
<td class="score">16</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team K</td>
<td class="score">30</td>
</tr>
<tr>
<td class="team">Team L</td>
<td class="score">58</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team M</td>
<td class="score">84</td>
</tr>
<tr>
<td class="team">Team N</td>
<td class="score">56</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ABC</td>
<td class="score">40</td>
</tr>
<tr>
<td class="team">Team 123</td>
<td class="score">51</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team MI</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team NW</td>
<td class="score">78</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ERT</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team QWERW</td>
<td class="score">54</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option2" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team O</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team P</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Q</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team R</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team S</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team T</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team U</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team V</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team W</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team X</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option3" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Y</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team Z</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team AA</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team BB</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team CC</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team DD</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option4" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team EE</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team FF</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team GG</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team HH</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team II</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team JJ</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
更多代码（下拉列表）：
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#' + $(this).val()).show();
})
});
CSS：
.boxscore {
font-family: verdana;
font-size: 9px;
border: 1px solid #d8d8d8;
border-collapse: collapse;
background: #fbfbfb;
color: #333;
display: inline-block;
}
.boxscore a {
color:#1b76bc;
text-decoration: none;
}
.team {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.score {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.info {
padding: 2px;
color:#333;
background: #fbfbfb;
font-weight:bold;
border-top: 1px solid #d8d8d8;
}
.group {
width: auto;
overflow:hidden;
height:55px;
}
.block {
display: inline-block;
}
.select-wrapper {
float:left;
background: transparent;
width: 100px;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #333;
font-family: verdana;
clear: left;
}
.sport-select {
float:left;
font-size: 10px;
color: #333;
font-family: verdana;
font-weight: bold;
padding-left: 5px;
}
答案 0 :(得分：0)
在div.group元素周围添加容器div。您可以通过修改其margin-left属性来移动数据。请参阅JavaScript部分。
添加箭头：
<div id="tools">
<span id="back"><</span>
<span id="spacer"> </span>
<span id="next">></span>
</div>
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide().css('margin-left', '0px');
$('#' + $(this).val()).show();
});
$('#next').on('click', function () {
console.log(parseInt($('.group').css('margin-left')));
$('.group').css('margin-left', parseInt($('.group').css('margin-left')) + 10 + 'px');
});
$('#back').on('click', function () {
console.log(parseInt($('.group').css('margin-left')));
$('.group').css('margin-left', parseInt($('.group').css('margin-left')) - 10 + 'px');
});
<div class="sport-select">Select sport:</div>
<div class="select-wrapper">
<select id="selectMe">
<option value="option1">Football</option>
<option value="option2">Volleyball</option>
<option value="option3">Softball</option>
<option value="option4">Boys Soccer</option>
</select>
</div>
<div id="groupContainer">
<div id="option1" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team A</td>
<td class="score">17</td>
</tr>
<tr>
<td class="team">Team B</td>
<td class="score">14</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team C</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team D</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team E</td>
<td class="score">15</td>
</tr>
<tr>
<td class="team">Team F</td>
<td class="score">32</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team G</td>
<td class="score">28</td>
</tr>
<tr>
<td class="team">Team H</td>
<td class="score">17</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team I</td>
<td class="score">18</td>
</tr>
<tr>
<td class="team">Team J</td>
<td class="score">16</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team K</td>
<td class="score">30</td>
</tr>
<tr>
<td class="team">Team L</td>
<td class="score">58</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team M</td>
<td class="score">84</td>
</tr>
<tr>
<td class="team">Team N</td>
<td class="score">56</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ABC</td>
<td class="score">40</td>
</tr>
<tr>
<td class="team">Team 123</td>
<td class="score">51</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team MI</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team NW</td>
<td class="score">78</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ERT</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team QWERW</td>
<td class="score">54</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option2" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team O</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team P</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Q</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team R</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team S</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team T</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team U</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team V</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team W</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team X</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option3" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Y</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team Z</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team AA</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team BB</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team CC</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team DD</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option4" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team EE</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team FF</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team GG</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team HH</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team II</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team JJ</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="tools"><span id="back"><</span><span id="spacer"> </span><span id="next">></span>
</div>
.boxscore {
font-family: verdana;
font-size: 9px;
border: 1px solid #d8d8d8;
border-collapse: collapse;
background: #fbfbfb;
color: #333;
display: inline-block;
}
.boxscore a {
color:#1b76bc;
text-decoration: none;
}
.team {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.score {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.info {
padding: 2px;
color:#333;
background: #fbfbfb;
font-weight:bold;
border-top: 1px solid #d8d8d8;
}
#groupContainer {
width:450px;
overflow:hidden;
}
.group {
width:450px;
overflow:hidden;
height:55px;
}
.block {
display: inline-block;
}
.select-wrapper {
float:left;
background: transparent;
width: 100px;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #333;
font-family: verdana;
clear: left;
}
.sport-select {
float:left;
font-size: 10px;
color: #333;
font-family: verdana;
font-weight: bold;
padding-left: 5px;
}
#tools {
margin-left:125px;
}
#spacer {
display:inline-block;
width:400px;
}
#tools {
cursor:default;
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
}
#back, #next {
cursor: pointer;
}
答案 1 :(得分：0)
滚动是在包装样式中完成的：
.group {
width: 300px;
height: 77px;
white-space: nowrap;
overflow: auto;
}
你可以使用jQuery简单地滚动包装器：
var scrollInterval;
function scrollDiv(px){
var visGroup = $('.group:visible');
visGroup.scrollLeft(
visGroup.scrollLeft() + px
);
};
//Scroll arrows
$('#arrowR').mousedown(function(){
scrollInterval = setInterval(function(){ scrollDiv(10) }, 50);
});
$('#arrowR').mouseup(function(){
clearInterval(scrollInterval);
});
$('#arrowL').mousedown(function(){
scrollInterval = setInterval(function(){ scrollDiv(-10) }, 50);
});
$('#arrowL').mouseup(function(){
clearInterval(scrollInterval);
});
更新了jsFiddle：http://jsfiddle.net/JSyLV/1612/