最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

前言

滚动条对于大家来说再熟悉不过了,正常情况下都是在页面的右侧显示,今天呢我带大家做一个挑战,实现滚动条在页面左侧显示的效果,当然了,我不是推荐大家在实际项目中使用,因为这不符合正常逻辑,除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路,从而回忆熟悉一下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技巧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS实现将垂直滚动条放置在左侧方法

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发