当前位置： 首页 > news >正文

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

news 2026/3/27 9:13:42

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

  • ① 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设置滚动条位置调整在左侧或者在上方

相关文章：

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

各种学习后的知识点整理归纳&#xff0c;非原创&#xff01; ① direction属性 滚动条在左侧显示② transform:scaleY() 滚动条在上侧显示 正常的滚动条会在内容超出规定的范围后在区域右侧和下侧显示在有些不正常的需求下会希望滚动条在上侧和左侧显示自己没有想到好的解决方案…...

编程日记 2024/5/14 8:07:16

华为设备display查看命令

display version //查看版本信息 display current-configuration //查看配置详情 display this //查看当前视图有效配置 display ip routing-table //查看路由表 display ip routing-table 192.168.3.1 //查看去往3.1的路由 display ip interface brief //查看接口下ip信息 dis…...

编程日记 2024/5/14 8:05:14

自动攻丝机进出料激光检测 进料出料失败报警循环手动及关闭报警退出无限循环

/**************进料检测********************/ /***缺料无限次循环 手动退出 超时报警*******/ void check_Pon() // { zstatus0; //报警计数器归零 Signauto1; …...

编程日记 2024/5/14 8:04:13

2024年去除视频水印的5种方法

如果你从事电影剪辑或者视频编辑工作&#xff0c;你经常需要从优酷、抖音、TikTok下载各种视频片段……。 通常这些视频带有水印和字幕。一些免费软件如CapCut、canva、Filmora也会给你制作的视频打上水印&#xff0c;这些水印嵌入在视频内部。 2024年去除视频水印的5种方法 …...

编程日记 2024/5/14 8:03:12

怎么用电脑接收手机文件 用备忘录传输更舒服

在这个数字化时代&#xff0c;手机已经成为我们随身携带的“百宝箱”&#xff0c;里面装满了各种重要的文件、资料和信息。然而&#xff0c;有时我们需要在电脑上处理这些文件&#xff0c;比如编辑文档、制作PPT或是查看照片。那么&#xff0c;如何在电脑与手机之间实现文件的顺…...

编程日记 2024/5/14 8:01:09

微信小程序、uniapp密码小眼睛

直接上代码喔喔喔喔喔喔喔喔~~ <input name"username" password"{{passwordHideShow}}" placeholder-style"color:#bdbdbd" type"text"maxlength"20" value"{{passwordNumber}}" bindinput"passwordInput…...

编程日记 2024/5/14 8:00:08

【手势操作-复习前一天的内容-预习今天的内容 Objective-C语言】

一、昨天呢，我们学习的是这个，事件 1.事件这一块儿呢，iOS事件，分为三大类， 1）触摸事件 2）加速计事件 3）远程控制事件 2.这个里边呢，我们主要学习的是这个触摸事件，触摸事件里边，就是Touch，touchesBegan：方法里边，有一个touches参数，它是set类型的， 3.Set，…...

编程日记 2024/5/14 7:59:06

​​​【收录 Hello 算法】第 6 章 哈希表

目录 第 6 章 哈希表 本章内容 第 6 章 哈希表 Abstract 在计算机世界中&#xff0c;哈希表如同一位聪慧的图书管理员。 他知道如何计算索书号&#xff0c;从而可以快速找到目标图书。 本章内容 6.1 哈希表6.2 哈希冲突6.3 哈希算法6.4 小结...

编程日记 2024/5/14 7:58:05

rust类型和变量(二)

基础知识 Rust中的变量基础知识 1.在Rust中&#xff0c;使用Iet关键字来声明变量 2.Rust支持类型推导&#xff0c;但你也可以显式指定变量的类型&#xff1a; Ietx:i325;/显式指定x的类型为i32 3.变量名蛇形命名法(Snake Case),i 而枚举和结构体命名使用帕斯卡命名法(Pasca|Ca…...

编程日记 2024/5/14 7:57:04

linux学习：多媒体开发库SDL+视频、音频、事件子系统+处理yuv视频源

目录 编译和移植 视频子系统 视频子系统产生图像的步骤 api 初始化 SDL 的相关子系统 使用指定的宽、高和色深来创建一个视窗 surface 使用 fmt 指定的格式创建一个像素点​编辑 将 dst 上的矩形 dstrect 填充为单色 color​编辑 将 src 快速叠加到 dst 上​编辑 更新…...

编程日记 2024/5/14 7:56:03

基于门控的循环神经网络：LSTM

之前我们介绍了循环神经网络的原理以及实现。但是循环神经网络有一个问题&#xff0c;也就是长期依赖问题。我们之前的01序列预测案例中可以看到&#xff0c;当序列长度到达10以上之后错误就会增多&#xff0c;说明简单的RNN记忆容量较小&#xff0c;当长度更大时就不怎么适用了…...

编程日记 2024/5/14 7:55:01

Web常见的攻击方式及其防御策略

随着互联网技术的快速发展&#xff0c;Web应用已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;Web应用也面临着各种安全威胁和攻击。了解这些常见的攻击方式&#xff0c;并采取有效的防御策略&#xff0c;对于保护Web应用的安全至关重要。 一、常见的Web攻击方…...

编程日记 2024/5/14 7:54:00

关于SQL

数据库简介&#xff1a; 数据库分类 关系型数据库模型&#xff1a; 优点&#xff1a;易于维护&#xff0c;可以实现复杂的查询 缺点&#xff1a;海量数据 读取写入性能差&#xff0c;高并发下数据库的io是瓶颈 是把复杂的数据结构归结为简单的二元关系&#xff08;即二维表…...

编程日记 2024/5/14 7:52:58

大模型时代下两种few shot高效文本分类方法

介绍近年(2022、2024)大语言模型盛行下的两篇文本分类相关的论文&#xff0c;适用场景为few shot。两种方法分别是setfit和fastfit&#xff0c;都提供了python的包使用方便。 论文1&#xff1a;Efficient Few-Shot Learning Without Prompts 题目&#xff1a;无需提示的高效少…...

编程日记 2024/5/14 7:51:57

Linux0.11 中全局描述符表（GDT）

在Linux内核中&#xff0c;全局描述符表&#xff08;Global Descriptor Table&#xff0c;简称GDT&#xff09;是一个关键的数据结构&#xff0c;主要用于管理处理器的内存段和相关的权限与属性。它属于x86架构中的保护模式特性&#xff0c;允许操作系统对内存访问进行更精细的…...

编程日记 2024/5/14 7:50:56

搜维尔科技：数据手套用于外固定虚拟现实模拟 、外固定增强现实模拟

数据手套用于外固定虚拟现实模拟、外固定增强现实模拟 搜维尔科技&#xff1a;数据手套用于外固定虚拟现实模拟、外固定增强现实模拟...

编程日记 2024/5/14 7:49:54

《三》菜单栏_工具栏_状态栏动作与实现

上期我们创建了辣么多的动作&#xff0c;那么这次我们要是开始实现这些动作&#xff0c;撸起袖子来吧&#xff1a; //菜单动作&#xff08;ACtion&#xff09;QAction *newAct;//新建QAction *openAct;//打开QAction *saveAct;//保存QAction *saveAsAct;//另存为QAction *prin…...

编程日记 2024/5/14 7:48:53

基于NTP服务器获取网络时间的实现

文章目录 1 NTP1.1 简介1.2 包结构1.3 UNIX 时间戳和NTP时间戳 2 代码实现2.1 实现步骤2.2 完整代码 3 结果 在某些场景下&#xff0c;单片机需要通过网络获取准确的时间进行数据同步&#xff0c;例如日志记录、定时任务等。然而&#xff0c;单片机本身无法直接获得准确的标准时…...

编程日记 2024/5/14 7:47:52

Web APIs（获取元素+操作元素+节点操作）

目录 1.API 和 Web API 2.DOM导读 DOM树 3.获取元素 getElementById获取元素 getElementsByTagName获取元素 H5新增方法获取 获取特殊元素 4.事件基础 执行事件 操作元素 修改表单属性 修改样式属性 使用className修改样式属性 获取属性的值 设置属性的值 移除…...

编程日记 2024/5/14 7:46:50

Android adb shell关于CPU核的命令

Android adb shell关于CPU核的命令 先使用命令&#xff1a; adb shell 进入控制台。 然后&#xff0c;直接在$后面输入下面命令&#xff0c;针对CPU的命令。 cat /proc/cpuinfo | grep ^processor | wc -l 查看当前手机的CPU是几核的。 cat sys/devices/system/cpu/online …...

编程日记 2024/5/14 7:45:48

Qwen3-0.6B-FP8惊艳效果：Qwen3-0.6B-FP8在中文法律条文理解任务中表现优异

Qwen3-0.6B-FP8惊艳效果&#xff1a;在中文法律条文理解任务中表现优异 最近&#xff0c;我在测试一个非常有意思的模型——Qwen3-0.6B-FP8。你可能听说过各种大模型&#xff0c;但这个模型有点特别&#xff0c;它是个“小个子”&#xff0c;却想在“大任务”上证明自己。我把…...

编程新知 2026/3/27 9:04:47

nli-distilroberta-base在工业质检文档中的应用：SOP操作步骤与现场记录逻辑一致性核查

nli-distilroberta-base在工业质检文档中的应用&#xff1a;SOP操作步骤与现场记录逻辑一致性核查 1. 项目背景与价值 在工业制造领域&#xff0c;标准作业程序(SOP)与现场操作记录的一致性核查是质量管理的核心环节。传统人工核查方式存在效率低、主观性强、覆盖不全等问题。…...

编程新知 2026/3/27 8:46:40

用TurtleBot3实测：Navigation2局部代价地图的滚动窗口为何必须用odom坐标系？

TurtleBot3实测&#xff1a;为什么Navigation2局部代价地图必须绑定odom坐标系&#xff1f; 当你在Gazebo中第一次看到TurtleBot3的导航表现时&#xff0c;可能会对局部代价地图&#xff08;Local Costmap&#xff09;的坐标系选择产生疑问。为什么这个实时更新的避障地图要绑定…...

编程新知 2026/3/27 7:36:14

Chainlit前端定制化｜通义千问1.5-1.8B-GPTQ-Int4私有化部署与UI二次开发教程

Chainlit前端定制化&#xff5c;通义千问1.5-1.8B-GPTQ-Int4私有化部署与UI二次开发教程 你是不是已经体验过各种在线大模型&#xff0c;但总感觉有些限制&#xff1f;比如数据隐私的担忧、网络延迟的困扰&#xff0c;或者想打造一个完全属于自己的、界面更符合业务需求的AI助…...

编程新知 2026/3/27 7:24:13

轻量级MCU命令行交互系统设计与优化

1. 轻量级MCU命令行交互系统设计指南1.1 系统概述在嵌入式系统开发过程中&#xff0c;调试和维护阶段往往需要与单片机进行参数交互和操作控制。传统解决方案如RT-Thread的finsh组件虽然功能强大&#xff0c;但对于资源受限的MCU&#xff08;如ROM<64KB&#xff0c;RAM<8…...

编程新知 2026/3/27 6:37:17

DeepFaceLab 512分辨率遮罩模型实战：如何精准处理头发和手部细节（附下载）

DeepFaceLab 512分辨率遮罩模型实战&#xff1a;如何精准处理头发和手部细节 在数字内容创作领域&#xff0c;视频换脸技术已经从简单的娱乐工具逐渐演变为影视特效、虚拟偶像制作等专业场景的核心技术。对于DeepFaceLab的中高级用户来说&#xff0c;如何突破基础换脸的局限&am…...

编程新知 2026/3/27 6:27:16

Mac能够连接校园网，但是无法上网

Mac电脑能够正常连接校园网&#xff0c;但是无法上网解决步骤&#xff1a;打开系统设置&#xff0c;网络&#xff0c;WI-FI&#xff0c;DNS把现有的删掉重置它。原因分析&#xff1a;应该是在使用代理时、访问什么网站被自动篡改了 DNS 设置&#xff0c;导致连接的 DNS 无法解析…...

编程新知 2026/3/27 5:52:59

基于springboot美食分享平台设计与开发(源码+精品论文+答辩PPT等资料)

博主介绍&#xff1a;CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交…...

编程新知 2026/3/27 5:38:55

通义千问3-Reranker-0.6B效果对比：不同参数规模的性能差异

通义千问3-Reranker-0.6B效果对比&#xff1a;不同参数规模的性能差异 1. 引言 在AI快速发展的今天&#xff0c;文本检索和排序技术已经成为智能搜索、推荐系统和RAG应用的核心。通义千问团队最新推出的Qwen3-Reranker系列模型&#xff0c;提供了从0.6B到8B多种参数规模的选择…...

编程新知 2026/3/27 5:20:45

Kimi-VL-A3B-Thinking Chainlit定制化开发：添加历史记录/多用户会话/图片标注功能

Kimi-VL-A3B-Thinking Chainlit定制化开发&#xff1a;添加历史记录/多用户会话/图片标注功能 1. 项目背景与模型介绍 Kimi-VL-A3B-Thinking是一款基于混合专家架构(MoE)的开源视觉语言模型(VLM)&#xff0c;在多模态推理和长上下文理解方面表现出色。该模型仅激活2.8B参数就…...

编程新知 2026/3/27 5:04:30