如何让水平滚动区域的垂直滚动条固定在滚动区域的右边？_Html5_论坛

如何让水平滚动区域的垂直滚动条固定在滚动区域的右边？

wa***88 分类：Html5 人气：1002 回帖：4 发布于6年前收藏

1.问题描述

题目可能一下子看不懂，下面这张图是我想实现的效果：

外部div中有一个水平滚动条，内部div中有一个垂直滚动条
但是我必须把水平滚动条拉到最右边，才能看到垂直滚动条。而我想把垂直滚动条固定在视窗口的右边，从而不需要拉动水平滚动条，就能看到垂直滚动条

2.我尝试的方法：
通过谷歌和百度的中文搜索，之所以没英文搜索，是因为这个问题太复杂，以至于用英文描述超出我的能力。

标签：css html html5

讨论这个帖子（4）垃圾回帖将一律封号处理……

Lv5 码农

Ca***on 职业无 6年前#1

你的问题没说清楚啊！ overflow-x: hidden;这样可以实现没有水平的滚动条。不知道是不是你想要的答案。

Lv3 码奴

Go***ng 职业无 6年前#2

问题是内部 div 太宽了，不要定度，或者宽度不要超过外部容器。水平滚动条没了，你的问题自然解决了。

下面代码中， .top 是你描述的现象， .bottom 应该是你期望的结果。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body style="margin: 20px;">

  <div class="top" style="background-color: red; overflow-x: scroll;">
    <div class="inner" style="width: 2000px; height: 200px; overflow-y: auto;">
      <div class="content" style="height: 300px; width: 100%;"></div>
    </div>
  </div>

  <div class="sep" style="margin: 50px 0;"></div>

  <div class="bottom" style="background-color: blue; overflow-x: auto;">
    <div class="inner" style="width: 100%; height: 200px; overflow-y: auto;">
      <div class="content" style="height: 300px; width: 100%;"></div>
    </div>
  </div>



</body>
</html>

Lv4 码徒

be***ar 产品经理 6年前#3

你这是用什么做的？原生CSS？

直接加overflow: scroll行不行？

Lv6 码匠

lu***ng 软件测试工程师 6年前#4

即使同时有横向和纵向滚动条，右侧的滚动条也不可能跑到框框里面去呀，你描述的场景给我的感觉就是右侧的滚动条跑到了div的内部

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取