0
我有一個表格,顯示了使用angular2組件實現的測量員電車線路時間表表格內整列內的水平滾動
目前它重複3天。我想重複7天,它應該是可滾動的。滾動應該只發生在有軌電車上。該tramline組件本身有很多樣式,並且只要實現了scroll-y樣式就會中斷它。我尋找了很多選擇,並找不到真正的解決方案。
這是調度部件
<schedule-component ng-reflect-schedule="[object Object]" ng-reflect- activities="[object Object]" ng-reflect-start-time="7" ng-reflect-end-time="18"><div class="inner">
<div class="lane" ng-reflect-inner-h-t-m-l="<div class="scheduleMarker mytooltip" style = "margin-left: 16.666666666666664%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 09:00<br/><strong> RG2 7HY</strong></span></div><div class="tramLine mytooltip" style= "width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black" ><i class="fa fa-arrow-right"></i><strong>&nbsp;09:00 - 09:30</strong><br/>Travel<br/>Duration: 0:30:<br/>Distance: 1.324 KM</span></div><div class="tram mytooltip" style= "width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;09:30 - 09:40</strong><br/>Key pickup<br/>EX2 7HY<br/>Duration: 00:10<br/>This is some description</span></div><div class="tramLine mytooltip" style= "width: 6.944444444444449%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black" ><i class="fa fa-arrow-right"></i><strong>&nbsp;09:40 - 10:30</strong><br/>Travel<br/>Duration: 00:50<br/>Distance: 4.532 KM</span></div><div class="tram mytooltip" style= "width: 8.333333333333332%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-home"></i><strong>&nbsp;10:30 - 11:30</strong><br/>Allocated booking<br/>EX2 7HY<br/>Duration: 01:00<br/>This is some description</span></div><div class="tramLine mytooltip" style= "width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black" ><i class="fa fa-arrow-right"></i><strong>&nbsp;11:30 - 12:00</strong><br/>Travel<br/>Duration: 00:30<br/>Distance: 3.532 KM</span></div><div class="tram mytooltip" style= "width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;12:00 - 12:10</strong><br/>Key drop<br/>EX2 7HY<br/>Duration: 00:10<br/>This is some description</span></div><div class="tram mytooltip" style= "width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;"><span class="mytooltiptext" style="background-color:black"><i class="fa-exclamation-circle"></i><strong>&nbsp;14:30 - 15:00</strong><br/>No-working Time<br/>EX2 7HY<br/>Duration: 00:30<br/>This is some description</span></div><div class="scheduleMarker mytooltip" style = "margin-left: 8.333333333333332%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 16:00<br/><strong> RG2 7HY</strong></span></div>"><div class="scheduleMarker mytooltip" style="margin-left: 16.666666666666664%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i> Time: 09:00<br><strong> RG2 7HY</strong></span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong> 09:00 - 09:30</strong><br>Travel<br>Duration: 0:30:<br>Distance: 1.324 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong> 09:30 - 09:40</strong><br>Key pickup<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 6.944444444444449%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong> 09:40 - 10:30</strong><br>Travel<br>Duration: 00:50<br>Distance: 4.532 KM</span></div><div class="tram mytooltip" style="width: 8.333333333333332%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-home"></i><strong> 10:30 - 11:30</strong><br>Allocated booking<br>EX2 7HY<br>Duration: 01:00<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong> 11:30 - 12:00</strong><br>Travel<br>Duration: 00:30<br>Distance: 3.532 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong> 12:00 - 12:10</strong><br>Key drop<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tram mytooltip" style="width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;"><span class="mytooltiptext" style="background-color:black"><i class="fa-exclamation-circle"></i><strong> 14:30 - 15:00</strong><br>No-working Time<br>EX2 7HY<br>Duration: 00:30<br>This is some description</span></div><div class="scheduleMarker mytooltip" style="margin-left: 8.333333333333332%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i> Time: 16:00<br><strong> RG2 7HY</strong></span></div></div>
</div>
</schedule-component>
代碼是否有可能?我是否需要以其他方式實施?我剛剛下載了這個html,並把它放到了一個笨蛋裏。請參閱下面的鏈接。
http://plnkr.co/edit/QOaBWK?p=preview