滚动包含表格的 div
这是我在 PHP 脚本中创建的部分表。
Date Description Month
Sun 3 - 14th Sunday of the year - July
Mon 4 - Week 14 of the year - July
or Saint Elizabeth of Portugal
Tue 5 - Week 14 of the year - July
or Saint Antony Mary Zaccaria, Priest
Wed 6 - Week 14 of the year - July
or Saint Maria Goretti, Virgin, Martyr
Thu 7 -
Fri 8 -
Sat 9 - Week 14 of the year - July
or Saint Augustine Zhao Rong and
his Companions, Martyrs
Sun 10 - 15th Sunday of the year - July
Mon 11 - Saint Benedict, Abbot - July
Tue 12 - Week 15 of the year - July
Wed 13 - Week 15 of the year, Saint Henry - July
Thu 14 - Week 15 of the year - July
or Saint Camillus of Lellis, Priest
Fri 15 - Saint Bonaventure, Bishop, Doctor - July
HTML 将如下所示。
<div class="scrollBoxYe">
<table class="grid">
<tr><td>
<div name="20110703" class="lcday">
<div class="lcright">Sun 3</div>
<div class="lcmid"> - 14th Sunday of the year</div>
<div class="lcright">- July</div>
</div>
</td></tr>
.
.
.
.
</table>
</div>
class="lcday" 的 div 的名称将是一个锚标记。我希望能够将scrollBoxYe div 滚动到与当前日期匹配的行。名称锚应该位于 div 元素中还是 tr 元素中？
onload 事件对 div 元素有用吗？我希望能够自动滚动 div 而无需任何点击事件。如果 onload 事件不可用，自动加载 div 的最佳方法是什么。我更喜欢避免在页面主体加载时执行此操作，因为同一页面上加载了不同的视图。
一旦我找到自动加载 div 的正确事件，我想调用这样的函数。
function scrolltoanchor(row){
document.getElementById("scrollBoxYe").scrollTop = document.getElementById(row).offsetTop
}
函数参数是锚点名称。
最重要的问题是：
- 如何定义锚点以便能够滚动到右行。
- 调用滚动函数的正确事件（body onload 不是一个选项）。
Here is a partial table that I am creating in a PHP script.
Date Description Month
Sun 3 - 14th Sunday of the year - July
Mon 4 - Week 14 of the year - July
or Saint Elizabeth of Portugal
Tue 5 - Week 14 of the year - July
or Saint Antony Mary Zaccaria, Priest
Wed 6 - Week 14 of the year - July
or Saint Maria Goretti, Virgin, Martyr
Thu 7 -
Fri 8 -
Sat 9 - Week 14 of the year - July
or Saint Augustine Zhao Rong and
his Companions, Martyrs
Sun 10 - 15th Sunday of the year - July
Mon 11 - Saint Benedict, Abbot - July
Tue 12 - Week 15 of the year - July
Wed 13 - Week 15 of the year, Saint Henry - July
Thu 14 - Week 15 of the year - July
or Saint Camillus of Lellis, Priest
Fri 15 - Saint Bonaventure, Bishop, Doctor - July
The HTML will look like this.
<div class="scrollBoxYe">
<table class="grid">
<tr><td>
<div name="20110703" class="lcday">
<div class="lcright">Sun 3</div>
<div class="lcmid"> - 14th Sunday of the year</div>
<div class="lcright">- July</div>
</div>
</td></tr>
.
.
.
.
</table>
</div>
The name for the div with class="lcday" will be an anchor tag. I'd like to be able to scroll the scrollBoxYe div to the row that matches the current day. Should the name anchor be in the div or in the tr element?
Is the onload event useful for the div element? I want to be able to scroll the div automatically without any click event. If the onload event isn't available what is the best way to load the div automatically. I prefer to avoid doing this with the page body onload because there are different views loaded on the same page.
Once I find the right event to load the div automatically, I want to call a function like this one.
function scrolltoanchor(row){
document.getElementById("scrollBoxYe").scrollTop = document.getElementById(row).offsetTop
}
The function parameter is the anchor name.
The most important questions are:
- how to define the anchor to be able to scroll to the right row.
- the right event to call the scrolling function (body onload not an option).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不知道使用 jquery 是否可以作为一种选择，但我认为它更容易。这个 fiddle 应该可以工作。
I do not know whether the use of jquery can be an option, but i think it's much more easier. This fiddle should work.