只横向滚动css,CSS:垂直滚动两个绝对定位的div,而水平滚动条保持固定

我有两个absolute ly定位

元素彼此相邻,是完全相同的高度,和右边的一个可能有水平溢出。

当存在水平溢流我想上div(并且只有div)滚动条在该div的底部,同时既divs继续时也有垂直溢出到一起垂直滚动保持固定。

问题是我想让左边的div在它的位置上保持固定。许多现代的文本编辑器都有这个功能(注意底部的滚动条和包含在左边的列中的行号):

之前滚动:

GJxXb.png

滚动后水平对齐方式:

Wwpbs.png

垂直滚动后:

GopVh.png

左边的行号保持固定,不管多远,你滚动的权利,但他们与页面垂直滚动和水平滚动条始终可用。

我一直在玩相对/绝对定位的容器元素的每一个组合来试图解决这个问题,但我一直在短。这是我最近一次尝试,但:

#div1

{

\t position: absolute;

\t top: 0;

\t left: 0;

\t bottom: 0;

\t height: 150%;

\t width: 60px;

\t background: black;

}

#outer

{

\t position: fixed; \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t

\t left: 0;

\t right: 0;

\t bottom: 0;

\t top: 0;

\t overflow-x: auto;

}

#div2

{

\t position: absolute;

\t top: 0;

\t left: 0;

\t right: 0;

\t height: 150%;

\t background: grey;

\t overflow-x: scroll;

}

#div2-wrapper

{

\t position: absolute;

\t top: 0;

\t right: 0;

\t left: 60px;

\t height: 50%;

}

#div1-wrapper

{

\t position: absolute;

\t top: 0;

\t left: 0;

\t height: 50%;

\t width: 60px;

}

\t

\t \t

\t \t

\t

\t

\t \t

\t \t

\t

我想避免使用jQuery,如果有可能,但我也有一个可用的,如果涉及到它。

编辑:为了澄清,我试图满足三个要求。 1:左边的div必须始终保持在其起始位置水平(向左或向右滚动不会移动它),2:左边的div必须与其旁边的div垂直滚动,3:如果存在水平溢出右边的div,它的滚动条必须始终保持在屏幕的底部。 Gooogle Sheets和Excel也使用行号进行操作。

2017-03-05

Jimmy P

+0

您是否尝试将第一个div(div1-wrapper)置于固定位置?如果我理解正确,那正是你需要的。 –

+0

是的,我试过。它似乎没有帮助。 –

+0

我建议你最小化和简化你的问题。我知道这不是难题,但我不明白你想要什么。 –

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值