在顶部显示滚动条&DIV
Displaying scroll bars on Top & Bottom of a DIV
我正在尝试显示顶部&CCD_ 1的底部水平滚动条。我发现了这个SO问题,并相应地更改了页面代码。
HTML/Razar
<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>
这会正常显示底部滚动条,但顶部滚动条被禁用,我在这里缺少什么?
提前感谢
更新
即使我删除了javascript,输出也是一样的。似乎Java脚本代码没有执行,但没有列出javascript错误。
您可以通过对HTML和CSS进行一些调整来实现,如下所示;
HTML应该是这样的:
<div class="wmd-view-topscroll">
<div class="scroll-div1">
</div>
</div>
<div class="wmd-view">
<div class="scroll-div2">
@Html.Markdown(Model.Contents)
</div>
</div>
CSS应该是这样的:
wmd-view-topscroll, .wmd-view {
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
border: none 0px RED;
}
.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 {
width: 1000px;
overflow-x: scroll;
overflow-y: hidden;
}
.scroll-div2 {
width: 1000px;
height:20px;
}
查看演示
最后用这段代码修复了它。。。
HTML
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
<div class="dynamic-div">
@Html.Markdown(Model.Contents)
</div>
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: auto;
overflow-y: hidden;
width: 1000px;
}
.wmd-view-topscroll
{
height: 16px;
}
.dynamic-div
{
display: inline-block;
}
Javascript/JQuery
<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());
});
});
$(window).load(function () {
$('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
});
</script>
谢谢你的回答。。。它真的帮助我理解了内在工作。:)
相关文章:
- jquery点击函数select&取消选择
- 添加文字和评论功能更新Div
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Angular js-返回一个包含类似
- 一点javascript元编程&可链接的设置器
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 通过JSON&比较时间
- Jquery模板,如果xx&&如果yy
- 使用JavaScript动态插入DIV的成本有多高
- DIV并排,位置不正确
- 下载Div&画布为一个图像
- Trouble overlaying one div with another with JavaScript &
- 在顶部显示滚动条&DIV
- 如何将DIV ID的值保存到数据库PHP&MySQL
- 如何将DIV向后移动&第四个缓慢地覆盖背景
- 克隆DIV&修改ID
- 代码点火器&AJAX-Div重新加载不起作用
- 查找&使用好的Ole JavaScript替换Div中的单词
- 点击即显示'Div 1'&隐藏'Div 2'&单击同一按钮显示'Di
- contenteditable DIV在FF&Chrome-如何隐藏它