如何使一个div滚动且不出现滚动条

在写聊天对话框时发现,要使对话列表框有滚动的出现在屏幕某个位置,且不出现滚动条,有两个方法可以做到:

1:使用固定定位fixed

拿自己写的案例来说,顶部有个信息框要固定,底部要固定输入框,中间是对话列表

给顶部信息框和顶部输入框同时加上fixed属性,同时给他们的top或bottom赋值就可以,但这样写的弊端就是信息框和输入框的宽度不在是父级元素的宽度,而是屏幕的宽度,像我的案例中,左侧还有东西时,那它左侧的东西也会有一点滚动,并不是我预期的需求,如果要达到只让对话列表框滚动,那还要固定左侧,在重新分配宽度,定布局

2:使用一个p来覆盖这个列表p

在对话列表外加一个p,使其overflow为hidden,让对话列表的overflow为auto,同是让外部的p宽度略小于内部p的宽度,用以覆盖其滚动条,同样可以达到p滚动不出现滚动条的效果,唯一不足就是获取其p的高度.利用全屏高度减去顶部信息框和底部输入框的高度,可以实现其效果,就是在自适应其他设备时高度不是很适合,不知道是获取高度的属性问题还是浏览器对属性的兼容问题

通过这两种方式可以实现其基本需求,但是都不是很完美,各有优缺点,根据实际情况做出相应的选择

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容