代码之家  ›  专栏  ›  技术社区  ›  Cain Nuke

如何使元素只在滚动条出现时出现?

  •  0
  • Cain Nuke  · 技术社区  · 6 年前

    你好,

    我需要某些伪元素,以便只在滚动条出现时出现。代码如下:

    .pseudo::before, .pseudo::after {
        position: absolute;
        z-index: 1;
        content: "";
        width: 18px;
        height: calc(100% - 2px);
        right: 0;
        display: block;
        pointer-events: none;
        border: 5px solid black;
        box-sizing: border-box;
    }
    
    .pseudo::before {background: rgba(177, 171, 44, 0.4);border-radius: 25px;}
    

    但是只有当滚动条出现时,这几行代码才是必需的。当它不在的时候不需要它。

    一个CSS唯一的解决方案将是很好的,但我是开放的选择。

    1 回复  |  直到 6 年前
        1
  •  0
  •   Ori Drori    6 年前

    您需要观察元素的大小,查看是否出现滚动条,如果出现,则添加一个类。伪元素只有在类存在于其父元素上时才会出现。演示使用新的 ResizeObserver . 目前只有Chrome支持。但是,有一个 pollyfill

    向下拖动文本区域手柄将其放大,直到出现滚动条。

    注: 伪元素出现后,它们会导致永久溢出,因此不能通过缩小文本区域来隐藏滚动条。。

    const ro = new ResizeObserver(entries => {
      const { target } = entries[0];
    	const hasScrollbar = target.scrollHeight > target.clientHeight;
      
      if(hasScrollbar) target.classList.add('has-scrollbar');
      else target.classList.remove('has-scrollbar');
    });
    
    ro.observe(document.querySelector('.pseudo'));
    .pseudo {
      position: relative;
      overflow: auto;
      height: 150px;
    }
    
    .pseudo.has-scrollbar::before, .pseudo.has-scrollbar::after {
      display: block;
    }
    
    .pseudo::before,
    .pseudo::after {
      position: absolute;
      z-index: 1;
      content: "";
      width: 18px;
      height: calc(100% - 2px);
      right: 0;
      display: none;
      pointer-events: none;
      border: 5px solid black;
      box-sizing: border-box;
    }
    
    .pseudo::before {
      background: rgba(177, 171, 44, 0.4);
      border-radius: 25px;
    }
    <div class="pseudo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus ante ac iaculis dapibus. Vestibulum quis purus at urna tincidunt commodo ac id ante.
      <br />
      <textarea></textarea>
    </div>