由于我很确定没有本地html或css方式这样做,我愿意用JavaScript做这件事.显然,我可以在我的div的底部使用overflow:auto在CSS中获得一个滚动条.是否有一些javascript可以从底部"克隆"滚动条并将其放在div的顶部？也许有另一种方式？
我不确定"粘性"是否适用于此术语,但有没有办法让滚动条overflow:auto保持可见？
我有一个相当大的表,我想要水平滚动; 但是,该表也相当高,所以当页面加载时,水平滚动条不在浏览器的视口内,因此很难说该表是可滚动的.
<div style = 'width:900px;overflow:auto'>
<table>
<!-- Very large table here -->
</table>
</div>
滚动条显示在表格下方,但遗憾的是桌子很高,除非向下滚动,否则无法看到它.
我希望水平滚动条保持可见,即使桌子离开屏幕,也可能固定在视口的底部.理想情况下,我只想使用CSS或少量的javascript.
对于我正在处理的事情,这是一个简单的HTML占位符.你可以忽略其余的(我希望!)并专注于这个唯一的问题:
图像上的缩放工作,它会按照我想要的方式聚焦在您按下的象限上.但如果在左上象限进行缩放,它只会放置顶部和底部滚动条.
我希望它始终显示滚动条.我错过了什么？
谢谢
var images = ["Species_copy_number.png", "Species_coverage.png", "Species_distribution.png", "Gene_copy_distribution.png"];
var descriptions = ["cariño", "muis bueno", "caliente", "CABRÓN!"];
var titles = ["ay", "ay ay", "ay ay ay", "AY AY AY MI HIJJJJJJOOOOOOOOOOOOO"];
function changeImage(index){
var img = document.getElementById("img_place");
img.src = "Figures/" + images[index];
document.getElementById("desc_place").textContent = descriptions[index];
document.getElementById("subtitle").textContent = titles[index];
}
window.zoomedIn = false;
window.onload = function(){
var canvas = document.getElementById("img_wrapper");
canvas.onclick = function(event){
var imgWrapper = this, zoomContainer = document.getElementById("zoom-container");
var imgPlace = document.getElementById("img_place");
if (window.zoomedIn) {
imgPlace.setAttribute("style", "transform …我正在尝试显示顶部和底部水平滚动条div.我发现了这个问题,并相应地更改了页面代码.
HTML /剃刀
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
@Html.Markdown(Model.Contents)
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: scroll;
overflow-y: hidden;
width: 1000px;
}
.scroll-div
{
width: 1000px;
}
使用Javascript
<script type="text/javascript">
$(function(){
$(".wmd-view-topscroll").scroll(function(){
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function(){
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
</script>
这显示底部滚动条正常但顶部滚动条被禁用,我在这里缺少什么？
提前致谢
UPDATE
即使我删除了javascript,输出也是一样的.似乎Java脚本代码没有执行,但没有列出javascript错误.
我有一个非常大的数据表,我想把水平滚动条放在桌面的顶部和底部,这样用户就可以更容易地滚动(数据表有很多列).有没有一种简单而恰当的方法来实现这一目标？
是否可以horizontal通过javascript或CSS 显示div顶部的滚动条而无需jquery.默认情况下它位于底部.
我为此瞪眼但没有得到任何帮助.
我使用"表响应"类在bootstrap中开发了一个表,它按预期工作,但由于表格相当大,并且将在一系列设备上使用,我需要使其更加用户友好.我搜索了论坛,但找不到我想要的东西.
是否可以让响应表底部出现的滚动条始终可见,而不仅仅是在屏幕最小化到一定程度时？
还有什么方法可以复制表顶部的滚动条吗？由于表格很长,因此在顶部和底部可以看到它是一个更好的解决方案.
请我有一个闪亮的 R 应用程序，其中一个页面有一个非常大的表格。出于这个原因，我需要在表格的顶部和底部都有水平滚动条。请记住，我对 HTML、CSS 和 JS 不太熟悉。此外，我已经设法使用解决方案将水平滚动条移动到表格顶部： R DT Horizontal scroll bar at top of the table
我实际上是在使用那里解释的示例，并且效果很好。我只需要一些帮助来在底部添加滚动条。
css <- HTML(
"#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
transform:rotateX(180deg);
}
#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
transform:rotateX(180deg);
}"
)
ui <- fluidPage(
tags$head(tags$style(css)),
fluidRow(column(width = 6,
h4("Flipped Scrollbar"),
br(),
DT::dataTableOutput("flipped")
),
column(width = 6,
h4("Regular Scrollbar"),
br(),
DT::dataTableOutput("regular")
)
)
)
server <- function(input, output, session) {
output$flipped <- DT::renderDataTable({
DT::datatable(mtcars, rownames = FALSE,
options = list( …如何在顶部和底部的 div 上创建两个滚动条？
我正在处理网页。我需要内容 div 作为候选显示候选详细信息的列表，如行列中的所有内容。所以我需要在内容上使用 Div 顶部滚动条。