突出显示滚动条上的特定区域

Posted 2023-03-30

【中文标题】突出显示滚动条上的特定区域

【英文标题】：Highlight specific area on scrollbar

【发布时间】：2020-12-08 12:26:36

【问题描述】：

我想知道是否可以使用 CSS 为滚动条上的特定区域着色。 我知道当您在文档上搜索查询 (Control+f) 时，浏览器（在我的情况下为 Chrome）会执行此操作。它看起来像这样：

是否可以在请求的位置上添加这样的黄线？

谢谢！

【参考方案1】：

非常有趣的问题。我想出了这个解决方案，即在滚动条上放置一个高亮 div。让我知道这是否适合您：

.container
  display: inline-flex;
  position: relative;


.content 
  width: 500px;
  height: 600px;
  overflow: auto;
  


.highlight 
  width: 18px;
  height: 3px;
  background-color: red;
  position: absolute;
  right: 0px;
  top: 100px;
  z-index: 10;


.highlight1 
  width: 18px;
  height: 3px;
  background-color: red;
  position: absolute;
  right: 0px;
  top: 200px;
  z-index: 10;


.highlight2 
  width: 18px;
  height: 3px;
  background-color: red;
  position: absolute;
  right: 0px;
  top: 250px;
  z-index: 10;

<div class="container">
<div class="highlight"></div>
<div class="highlight1"></div>
<div class="highlight2"></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Diam maecenas sed enim ut sem. Proin nibh nisl condimentum id. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Vestibulum lectus mauris ultrices eros in cursus. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Luctus accumsan tortor posuere ac ut consequat semper. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Duis ultricies lacus sed turpis tincidunt id aliquet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Id aliquet risus feugiat in ante metus. Vitae tempus quam pellentesque nec. Ullamcorper dignissim cras tincidunt lobortis feugiat. Nunc congue nisi vitae suscipit tellus. Semper risus in hendrerit gravida rutrum quisque. Turpis egestas pretium aenean pharetra magna ac. In arcu cursus euismod quis viverra.

Varius quam quisque id diam vel quam elementum pulvinar. Nulla malesuada pellentesque elit eget. Lobortis mattis aliquam faucibus purus in. Sed pulvinar proin gravida hendrerit. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Cursus euismod quis viverra nibh. Ipsum a arcu cursus vitae. Lacus vestibulum sed arcu non odio euismod lacinia at. Et tortor at risus viverra adipiscing. Faucibus purus in massa tempor nec. Non consectetur a erat nam at lectus urna duis. Hac habitasse platea dictumst quisque. Id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris cursus mattis molestie a iaculis at. In mollis nunc sed id semper risus. Dui sapien eget mi proin sed libero. At volutpat diam ut venenatis. Justo eget magna fermentum iaculis eu. Orci porta non pulvinar neque laoreet suspendisse. Ultricies leo integer malesuada nunc vel.

Elit ut aliquam purus sit amet luctus venenatis lectus. Turpis egestas sed tempus urna et pharetra pharetra massa. Eget dolor morbi non arcu. Nisl purus in mollis nunc sed id semper risus in. Pellentesque habitant morbi tristique senectus et netus. In hac habitasse platea dictumst vestibulum. Pellentesque nec nam aliquam sem et. Eros donec ac odio tempor orci dapibus ultrices. Ut enim blandit volutpat maecenas volutpat blandit. Parturient montes nascetur ridiculus mus mauris vitae. Rhoncus mattis rhoncus urna neque viverra justo nec.

Sed turpis tincidunt id aliquet risus feugiat in ante metus. Pulvinar mattis nunc sed blandit libero volutpat. Tortor at risus viverra adipiscing. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Tortor at risus viverra adipiscing at in tellus integer feugiat. Felis donec et odio pellentesque diam volutpat commodo sed. Curabitur vitae nunc sed velit dignissim. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Pretium nibh ipsum consequat nisl vel pretium lectus. In fermentum et sollicitudin ac orci. Arcu odio ut sem nulla pharetra diam sit. Velit scelerisque in dictum non consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Arcu non sodales neque sodales ut etiam sit amet nisl. Risus nullam eget felis eget nunc. Nibh sit amet commodo nulla facilisi nullam. Maecenas accumsan lacus vel facilisis volutpat est velit. Sem nulla pharetra diam sit amet nisl. Praesent elementum facilisis leo vel fringilla est ullamcorper.

Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Maecenas ultricies mi eget mauris. Gravida cum sociis natoque penatibus. At risus viverra adipiscing at in. Sed arcu non odio euismod lacinia at quis. Sed viverra tellus in hac habitasse. Donec pretium vulputate sapien nec sagittis. Ornare quam viverra orci sagittis eu volutpat. Amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit. Sagittis purus sit amet volutpat.

Sem et tortor consequat id porta nibh venenatis cras sed. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio ut enim blandit volutpat. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit. Mi eget mauris pharetra et ultrices neque ornare aenean. Est sit amet facilisis magna etiam tempor. Tortor at auctor urna nunc. Vitae elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut. Urna nunc id cursus metus aliquam eleifend mi in. Amet justo donec enim diam vulputate ut. Habitant morbi tristique senectus et. Sed risus ultricies tristique nulla aliquet. Quis ipsum suspendisse ultrices gravida dictum. Sed augue lacus viverra vitae congue eu. Nec dui nunc mattis enim ut tellus. Sit amet purus gravida quis blandit turpis cursus in. Amet consectetur adipiscing elit duis tristique sollicitudin.
</div>
</div>

【讨论】：

不错的尝试。但此解决方案受到以下限制： 1. 不响应。 2. 需要第二个滚动条 - 不能在根滚动条上工作。