我有一个正在使用的票务插件,它提供了 html 事件表。我希望该表可以通过单击向上和向下箭头来滚动浏览事件。因此,我将表格放在一个 div 后面,该 div 隐藏了溢出,仅显示该 div 中的 3 个事件。
然后,我创建了一些代码,允许顶部箭头和底部箭头添加或减去 div 元素样式的“顶部”,以便在受限制的 div 后面上下移动表格。
问题是用户可以不断点击超出表格可见范围的顶部和向下箭头。这意味着如果用户点击顶部箭头太多次,则该表对用户来说基本上就会消失。我希望实现一些 JavaScript,它表示如果 div 元素到达 top:0px,则禁止顶部箭头单击功能。如果 div 元素到达 top: -434px 那么它不允许底部箭头功能。
一旦这些函数不再是那些特定的最大值和最小值,它们就必须再次激活。我在这里创建了一个粗略的 codepen 演示:https://codepen.io/TheBrandsmen/pen/JjdEQgj
它没有包含所有 CSS 等内容,但总体思路已经有了。如果关于如何使 html 表格可滚动还有其他更好的想法,请随时发表评论。
<body>
<div class="up-arrow" onclick="MoveDiv()"><img src="https://thebrandsmen.com/staging/thegrizzlyrose/wp-content/uploads/2020/02/up-arrow.png"></div>
<div class="carousel-frame">
<script>twSendEvent({'twView':'list','event':'twView'});</script><style>
</style>
<div class="tw-plugin-upcoming-event-list" id="id_1" style="top: 0px;">
<table>
<tbody><tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10214595">
Runaway June </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Feb 29</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=9929345">
Clay Walker </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 06</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=9929365">
Clay Walker </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 07</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10117425">
JASON BOLAND & THE STRAGGLERS </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 13</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10356305">
Jerrod Niemann </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 20</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10367135">
Josh Gracin </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 27</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10188845">
Aaron Lewis </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Mar 28</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10218455">
COPPER CHIEF </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Apr 03</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=9993135">
106.7 The Bull Birthday Bash with Michael Ray and Carly Pearce </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Apr 08</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="tw-event-venue-name tw-remove-when-empty">
</div>
<div class="tw-event-venue-address tw-remove-when-empty">
</div>
<div class="tw-event-prefix-text tw-remove-when-empty">
</div>
<div class="tw-event-name tw-remove-when-empty">
<a href="/?event_id=10376005">
RAYNE JOHNSON </a>
</div>
<ul class="tw-attraction-list tw-remove-when-empty">
</ul>
<div class="tw-event-date-time tw-remove-when-empty">
<span class="tw-event-date-complete"> <span class="tw-event-date">Apr 17</span></span>
</div>
<div class="tw-event-description tw-remove-when-empty">
</div>
<div class="tw-event-additional-text tw-remove-when-empty">
</div>
<div class="tw-event-price tw-remove-when-empty">
</div>
<div class="tw-event-links tw-remove-when-empty">
<span class="tw-event-more-info-link tw-remove-when-empty">
</span>
<span class="tw-event-ticketing-link tw-remove-when-empty">
</span>
</div>
</td>
</tr>
</tbody></table>
</div>
<style>
.tw-paginate {
text-align: center;
position: relative;
width: 100%;
}
</style>
<div class="tw-paginate">
<span class="tw-paginate-text">
<span class="previous">« Previous</span>
<span class="seperator">|</span>
<span class="lead">Page:</span>
<span class="current">1</span>
<span class="link"><a href="?twpage=1">2</a></span>
<span class="seperator">|</span>
<span class="next"><a href="?twpage=1">Next »</a></span>
</span>
</div>
</div>
<div class="down-arrow" onclick="DownDiv()"><img src="https://thebrandsmen.com/staging/thegrizzlyrose/wp-content/uploads/2020/02/Down-Arrow.png"></div>
</body>
body {
background: gray;
}
.slider-flex-2 tr:nth-child(odd), .slider-flex-2 .pricing-table>li:nth-child(odd), .slider-flex-2 .pricing-extra {
background: transparent !important;
}
.main_color tr:nth-child(even) {
background: transparent !important;
}
.slider-flex-2 table {
background: transparent !important;
}
.slider-flex-2 tr th:first-child, .slider-flex-2 tr td:first-child {
border: none;
}
.slider-flex-2 td {
display: flex;
justify-content: center;
}
td {
display: flex;
}
.slider-flex-2 .tw-paginate {
display: none;
}
.slider-flex-2 .tw-plugin-upcoming-event-list a {
color: #ffffff;
}
span.tw-event-date {
font-size: 24px;
font-family: Roboto;
font-weight: bold;
}
span.tw-event-date:before {
content: "-";
padding-right: 10px;
}
.tw-event-name.tw-remove-when-empty {
max-width: 20vw;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24px;
font-family: Roboto;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
}
.move-up {
margin-top: -47px;
transition: 1s;
font-size: 40px;
}
.move-down {
margin-top: 47px;
transition: 1s;
font-size: 40px;
}
.carousel-frame {
height: 185px;
overflow: hidden;
}
.tw-plugin-upcoming-event-list {
position: relative;
top:0px;
}
.tw-plugin-upcoming-event-list td {
padding: 16px 12px;
}
.tw-plugin-upcoming-event-list span.tw-event-date {
white-space: nowrap;
}
.tw-plugin-upcoming-event-list td {
border-bottom: 1px solid #ffffff !important;
}
#tw-plugin-upcoming-event-list {
position: relative;
top:0px;
}
.up-arrow {
margin-bottom: 20px;
max-width: 20vw;
}
.up-arrow img {
margin: auto;
display: block;
}
.down-arrow {
margin-top: 20px;
max-width: 20vw;
}
.down-arrow img {
margin: auto;
display: block;
}
$( document ).ready(function() {
$(".tw-plugin-upcoming-event-list").css("top","0");
});
$(function(){
$('.tw-plugin-upcoming-event-list').attr('id',function(i){
return 'id_'+(i+1);
});
});
function DownDiv()
{
div = document.getElementById("id_1");
div.style.top = parseInt(div.style.top) - 62 + "px";
}
function MoveDiv()
{
div = document.getElementById("id_1");
div.style.top = parseInt(div.style.top) + 62 + "px";
}
最佳答案
为您所做的更改是检查 div 当前顶部并根据表格高度
$( document ).ready(function() {
$(".tw-plugin-upcoming-event-list").css("top","0");
});
$(function(){
$('.tw-plugin-upcoming-event-list').attr('id',function(i){
return 'id_'+(i+1);
});
});
function DownDiv()
{
div = document.getElementById("id_1");
var tableOffset = 150; // teh offest until the end the height is a bit bigger
var top = parseInt(div.style.top)
var tblStyle =getComputedStyle(div.querySelector('table'))
var tblHeight = parseInt(tblStyle.height)
if(top < ((tblHeight -tableOffset )*-1) ){ // chcek if the top is at the end of the table height
div.style.top = parseInt(div.style.top)+ "px";
}else{
div.style.top = parseInt(div.style.top) - 62 + "px";
}
}
function MoveDiv()
{
div = document.getElementById("id_1");
var top = parseInt(div.style.top)
if(top == 0 ||top > 0){ // check if the the top is 0 or bigger then 0 and make it the same top as before
div.style.top = top + "px";
}
else{
div.style.top = top + 62 + "px";
}
}
关于javascript - 为 Div 元素样式 "Top"创建最大值和最小值,使 onclick 函数处于非事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60397221/