首页 前端知识 css--控制滚动条的显示位置

css--控制滚动条的显示位置

2024-06-09 09:06:33 前端知识 前端哥 442 28 我要收藏

各种学习后的知识点整理归纳,非原创!

  • ① direction属性 滚动条在左侧显示
  • ② transform:scaleY() 滚动条在上侧显示

  1. 正常的滚动条会在内容超出规定的范围后在区域右侧和下侧显示
  2. 在有些不正常的需求下会希望滚动条在上侧和左侧显示
  3. 自己没有想到好的解决方案在网上找到了答案,记录一下

① direction属性 滚动条在左侧显示

direction:设置文本的方向
rtl 表示从右到左, ltr 表示从左到右。

  1. 使用direction属性将父元素设置为从右到左,rtl。
  2. 在使用direction属性将内容的子元素设置为从左到右,ltr。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test scroll</title>
    <style>
        .wrapper {
            width: 400px;
            height: 400px;
            overflow: auto;
            direction: rtl; /* 设置内容从右到左 */
        }

        .content {
            width: 400px;
            height: 400px;
            direction: ltr; /* 设置内容从左到右 */
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="content">
            <p> 测试文字</p>
            1假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容
            2假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容
            .....
        </div>
    </div>

</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


② transform:scaleY() 滚动条在上侧显示

  1. 使用transform:scaleY(-1) 属性将父元素上下翻转
  2. 在使用transform:scaleY(-1) 属性将父元素上下翻转回来
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test scroll</title>
    <style>
        .wrapper {
            width: 400px;
            height: 400px;
            overflow: auto;
            direction: rtl; /* 设置内容从右到左 */
            transform: scaleY(-1); /* 设置父元素上下翻转 */
        }

        .content {
            width: 400px;
            height: 400px;
            direction: ltr; /* 设置内容从左到右 */
            transform: scaleY(-1); /* 设置父元素上下翻转回来 */
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="content">
            <p> 测试文字</p>
            1假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容
            2假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容
            3假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容
            ......
        </div>
    </div>

</body>

</html>

在这里插入图片描述
在这里插入图片描述


总结:两种方法其实原理一致,就是设置父元素为一个相反的方向(上,左),再设置显示内容的外层元素为翻转方向(下、右)。


相关链接:
纯CSS设置滚动条位置调整在左侧或者在上方

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11611.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!