CSS实现将垂直滚动条放置在左侧方法

目录
文章目录隐藏
  1. 前言
  2. 技巧一:定向方法
  3. 技巧二:旋转角度
  4. 结语

前言

滚动条对于大家来说再熟悉不过了,正常情况下都是在页面的右侧显示,今天呢我带大家做一个挑战,实现滚动条在页面左侧显示的效果,当然了,我不是推荐大家在实际项目中使用,因为这不符合正常逻辑,除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路,从而回忆熟悉一下 css 相关知识点,毕竟时间长了总是会遗忘。

接下来实现方式可谓是 css 的奇淫技巧,而 web 是一个很大的地方,有着不可知的情况,有时需要奇怪的解决方案。

技巧一:定向方法

这里的诀窍是让滚动的父元素使用direction:rtl(或与主方向相反的方向),并让滚动元素的内部切换回正常值。

这里提一下direction:rtl属性相关知识,在网上关于该属性的讲解很少,所以我在这里为大家做一下简单地讲解。只要是在码云笔记上发布的关于前端教程,都会想方设法为小伙伴们讲解透,一起来看一下。

direction

CSS 属性 direction 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左, ltr 表示从左到右。

先看一下使用direction:ltr效果

blockquote {
  direction: ltr;
}

如下图:

使用 direction:ltr 效果

使用direction:rtl效果

blockquote {
  direction: rtl;
}

效果如下:

使用 direction:rtl 效果

该属性设置可以设置块级元素文本的基本方向,也可以设置由通过 unicode-bidi 属性创建的嵌入元素的方向。与此同时,它还可以设置文本、块级元素的默认对齐方式 ,以及表行中的单元格的流动方向。

与 HTML 中的 dir 属性不同,direction 属性不会从表列继承到表单元格, 因为 CSS 继承遵从文档流, 而表单元格位于行内部, 但不在列内部。

direction 属性和 unicode-bidi 属性不受 all 属性影响。

关于 direction 属性的浏览器支持情况怎么样呢?

所有浏览器都支持 direction 属性,所以放心使用。

以上就是简单介绍 direction 属性知识,接下来看看如何通过该属性实现垂直滚动条在页面左侧显示的。

HTML 文本内容我以朱自清的《春》为例,特别美的文章,它以诗的笔调,描绘了我国南方春天特有的景色:绿草如茵,花木争荣,春风拂煦,细雨连绵,呈现一派生机和活力;在春境中的人,也精神抖擞,辛勤劳作,充满希望。《春》是一幅春光秀丽的画卷,《春》是一曲赞美青春的颂歌。记得当年老师还让全篇背诵的,哈哈,好的文章永远好,现在读还是那么让人着迷!

HTML 代码(技巧二通用):

<div class="scrolling-area">
  <div class="scrolling-element-inside">
    <p>盼望着,盼望着,东风来了,春天的脚步近了。</p>
    <p>一切都象刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。</p>
    <!-- 一下省略好多个<p></p> -->
  </div>
</div>

CSS 代码:

.scrolling-area {
  max-width: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  background: white;
  direction: rtl;
}

.scrolling-element-inside {
  direction: ltr;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: antiquewhite;
}

效果如下:

CSS 实现将垂直滚动条放置在左侧方法

是不是很简单呢。

技巧二:旋转角度

对我来说,为了非文本方向的目的而扰乱文本方向总是让我觉得有点可怕,所以这个技巧让我感觉不那么老套。诀窍是将父对象旋转 180 度,然后将子对象再向后旋转 180 度,使其再次垂直。

由于第一次旋转,滚动条在另一侧结束。

CSS 代码:

.scrolling-area {
  max-width: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  background: white;
  transform: rotate(180deg);
}

.scrolling-element-inside {
  transform: rotate(-180deg);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: antiquewhite;
}

最终实现的效果和上图 GIF 一样,但这一次有两个特别尴尬的原因:

  1. 默认情况下,滚动元素滚动到底部
  2. 滚动方向与滚轮的方向相反。滚动条本身的行为应该和预期的一样,但是触控板或鼠标滚轮会感觉到滚动方向在该元素中被颠倒了。

结语

以上就是码云笔记为大家带大家通过 CSS 实现垂直滚动条放置在左侧方法,当然实际需求中几乎没遇到过,至少我没遇到,不管怎样,我们又学到了两个 css 技巧。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS实现将垂直滚动条放置在左侧方法

发表回复