<a href="#" id="show-popover">Toggle popover</a>

<div class="popover">
  <div class="scroll-view">
    <p>A Scanner Darkly is a BSFA Award-winning 1977 science fiction novel by American writer Philip K. Dick. The semi-autobiographical story is set in a dystopian Orange County, California, in the then-future of June 1994, and includes an extensive portrayal of drug culture and drug use (both recreational and abusive). The novel is one of Dick's best-known works and served as the basis for a 2006 film of the same name, directed by Richard Linklater.</p>
    <p>The protagonist is Bob Arctor, member of a household of drug users, who is also living a parallel life as Agent Fred, an undercover police agent assigned to spy on Arctor's household. Arctor/Fred shields his identity from those in the drug subculture and from the police. (The requirement that narcotics agents remain anonymous, to avoid collusion and other forms of corruption, becomes a critical plot point late in the book.) While posing as a drug user, Arctor becomes addicted to "Substance D" (also referred to as "Slow Death", "Death" or "D"), a powerful psychoactive drug. A conflict is Arctor's love for Donna, a drug dealer, through whom he intends to identify high-level dealers of Substance D.</p>

<p>When performing his work as an undercover agent, Arctor goes by the name "Fred" and wears a "scramble suit" that conceals his identity from other officers. Then he is able to sit in a police facility and observe his roommates through "scanners," audio-visual surveillance devices that are placed throughout the house. Arctor's use of the drug causes the two hemispheres of his brain to function independently or "compete". When Arctor sees himself in the videos saved by the scanners, he does not realize that it is him. Through a series of drug and psychological tests, Arctor's superiors at work discover that his addiction has made him incapable of performing his job as a narcotics agent. They do not know his identity because he wears the scramble suit, but when his police supervisor suggests to him that he might be Bob Arctor, he is confused and thinks it cannot be possible.</p>
body {
  background: #f4f4f4;
  font-family: sans-serif;
  font: 14px / 20px sans-serif;
.popover {
  margin: 48px auto;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  width: 256px;
  height: 336px;
  display: none;
  border-radius: 8px;
  overflow: hidden;
  &.active {
    display: block;
    animation: fade-in 300ms ease-out;
    @keyframes fade-in {
      from {
        opacity: 0;
        transform: translateY(24px);
      to {
        opacity: 1;
        transform: translateY(0);
  .scroll-view {
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 100%;
    p {
      &:first-child {
        margin-top: 0;
      &:last-child {
        margin-bottom: 0;
View Compiled
const popover = document.querySelector('.popover');
const scrollView = document.querySelector('.scroll-view');

function flashScrollers(elem) {
  const currentScroll = elem.scrollTop;
  const maxScroll = elem.scrollHeight;
  const altScroll = (() => {
    if (currentScroll < 1 || currentScroll < maxScroll)
      return currentScroll + 1;
      return currentScroll - 1;
  elem.scrollTop = altScroll;
  elem.scrollTop = currentScroll;
  const flashScrollersEvent = new Event('flashScrollers');

document.querySelector('#show-popover').addEventListener('click', function(e) {
  if(popover.classList.contains('active')) {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js