0

画面の横幅いっぱいに線を引きたいと思います。
その線はマウスの動きに付いてくるようにしたいです。やり方、参考になりそうなリンクをご存知でしたら教えてください。

やりたいことのイメージはこんな感じです
https://www.fetchingfields.com
 Accessibillity options のアイコンをクリック
  Reading Line をクリック

JavascriptのEventlistenerを使っていると思いますが、

Reading Line をクリックすると太字の箇所が追加されます。クラスが追加されます。

<div class="accessibility-col mobile-accessibly-d-none **active-accessibility-item"**>

Reading Line をクリックするとaria-pressedがtrueからfalseに変わります。

<button id="readingLine" role="button" **aria-pressed="false"** aria-label="Reading Line" class="accessibly-read-ignore accessibility-option-button navigable">

Reading Line をクリックするとfillが#D0D0D0から#1021b1

<path d="M13.875 8.71875C13.875 9.10938 14.0117 9.44141 14.2852 9.71484C14.5586 9.98828 14.8906 10.125 15.2812 10.125H23.25V29.3438C23.25 29.7344 23.1133 30.0664 22.8398 30.3398C22.5664 30.6133 22.2344 30.75 21.8438 30.75H2.15625C1.76562 30.75 1.43359 30.6133 1.16016 30.3398C0.886719 30.0664 0.75 29.7344 0.75 29.3438V2.15625C0.75 1.76562 0.886719 1.43359 1.16016 1.16016C1.43359 0.886719 1.76562 0.75 2.15625 0.75H13.875V8.71875ZM17.625 22.5469V22.0781C17.625 21.6094 17.3906 21.375 16.9219 21.375H7.07812C6.60938 21.375 6.375 21.6094 6.375 22.0781V22.5469C6.375 23.0156 6.60938 23.25 7.07812 23.25H16.9219C17.3906 23.25 17.625 23.0156 17.625 22.5469ZM17.625 18.7969V18.3281C17.625 17.8594 17.3906 17.625 16.9219 17.625H7.07812C6.60938 17.625 6.375 17.8594 6.375 18.3281V18.7969C6.375 19.2656 6.60938 19.5 7.07812 19.5H16.9219C17.3906 19.5 17.625 19.2656 17.625 18.7969ZM17.625 14.5781C17.625 14.1094 17.3906 13.875 16.9219 13.875H7.07812C6.60938 13.875 6.375 14.1094 6.375 14.5781V15.0469C6.375 15.5156 6.60938 15.75 7.07812 15.75H16.9219C17.3906 15.75 17.625 15.5156 17.625 15.0469V14.5781ZM23.25 7.89844V8.25H15.75V0.75H16.1016C16.4922 0.75 16.8242 0.886719 17.0977 1.16016L22.8398 6.90234C23.1133 7.17578 23.25 7.50781 23.25 7.89844Z" ***fill="#1021b1"***></path>

1 件の回答 1

2

まず mousemove イベントでマウスが動くたびに垂直位置を取得します。そして固定配置した線だけの要素の top プロパティの値を、取得した垂直位置へ設定すればそのような動作が実現できます。

document.addEventListener("mousemove", e => {
  const offsetY = e.clientY;
  const line = document.querySelector(".line");
  if (getComputedStyle(line).getPropertyValue("display") === "none") {
    line.style.setProperty("display", "block");
  }
  line.style.setProperty("--y", `${offsetY}px`);
});
.line {
  position: fixed;
  top: var(--y);
  left: 0;
  right: 0;
  display: none;
  border: red solid;
}
<div class="line" style="--y: 50px"></div>
<div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar erat sit amet lacinia lobortis. Etiam condimentum odio eros, ac gravida orci convallis eu. Duis leo justo, vulputate non vehicula vel, vehicula in nibh. Ut augue ligula, aliquet at
    metus ut, interdum tincidunt eros. Donec fermentum eu dolor sit amet pulvinar. Aenean scelerisque turpis nunc, eu bibendum odio feugiat in. Etiam feugiat, ipsum eu eleifend hendrerit, ipsum ante semper erat, ut tempus urna risus vitae dolor. Aenean
    sed semper orci.
  </p>
  <p>
    Nullam sit amet lectus ut massa vestibulum egestas. Fusce congue sapien et massa congue sollicitudin. Etiam quis enim vel sem sodales dignissim eget at ex. Nam consequat gravida sollicitudin. Nunc aliquet efficitur magna, ac viverra libero fringilla sit
    amet. Vivamus pulvinar tempus ante, vitae tristique quam blandit nec. Duis maximus aliquam volutpat. Vestibulum sit amet aliquet arcu, id fringilla dui. Fusce pulvinar nisi eu vehicula iaculis. Morbi ultricies neque ut faucibus commodo. Donec ut nulla
    posuere metus imperdiet venenatis nec ut enim. Curabitur maximus sem in metus fermentum dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  </p>
  <p>
    Nulla congue malesuada nisi ac sollicitudin. Integer fermentum eros felis, ut egestas sapien suscipit ac. Duis ultrices erat enim, quis ornare dui sodales vitae. Nulla facilisi. Nulla sagittis pulvinar massa, ac sollicitudin massa aliquam et. Nam rutrum
    nulla nunc, nec euismod enim rutrum id. Pellentesque orci diam, ullamcorper vitae elit viverra, dictum ullamcorper quam.
  </p>
  <p>
    Nam congue magna a dolor vehicula, non feugiat neque mattis. Ut dictum mollis magna. Aenean in odio interdum, elementum libero ut, finibus sapien. Nulla euismod ornare dolor nec aliquet. Aenean maximus nisl vel pellentesque fringilla. Maecenas maximus,
    orci non finibus bibendum, erat dui placerat arcu, a iaculis metus metus vel risus. Suspendisse rhoncus ex tellus, vel condimentum purus eleifend nec. Phasellus in mi fringilla, feugiat lacus eget, lacinia nulla. Etiam ac nisl hendrerit, feugiat velit
    at, eleifend tellus. Aenean et magna sem. Donec dui massa, aliquam quis hendrerit sit amet, venenatis ut mauris. Cras molestie elit sapien, malesuada condimentum tellus accumsan et. Aliquam erat volutpat. Duis malesuada fermentum urna a ultrices.
    Maecenas sed arcu a risus euismod fringilla vitae vel erat. Nunc sed urna cursus, lobortis ante a, vulputate mauris.
  </p>
  <p>
    Phasellus semper at mi id euismod. Duis sit amet risus sit amet neque tempor iaculis. Suspendisse lobortis sed lacus vitae porttitor. Nulla pellentesque posuere arcu id imperdiet. Morbi sit amet urna ante. Aliquam ac placerat massa. In hac habitasse platea
    dictumst. Duis non lectus urna. Ut a lacinia purus. Morbi non porta urna, eu laoreet arcu.
  </p>
  <p>
    Donec ut euismod ex, ac mattis nibh. Nam fermentum sollicitudin ante, sed dignissim velit tincidunt nec. In viverra lobortis arcu vulputate sagittis. Vestibulum tincidunt sem id rhoncus laoreet. Quisque odio ex, pulvinar vitae egestas id, blandit sed
    nisi. Vivamus at dignissim felis, vel finibus nisi. Nunc auctor rhoncus ullamcorper. Nam nec leo eros. Vivamus vestibulum nulla et tempor pharetra. Vivamus eget ultricies mi. Donec nibh purus, aliquet ut est non, luctus euismod purus. Quisque sem
    ante, suscipit quis velit eu, viverra egestas velit.
  </p>
  <p>
    Vestibulum ligula metus, posuere vel enim in, elementum sagittis nibh. Vivamus sagittis nisi sed lacus blandit, fermentum consectetur sem fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque
    gravida commodo est at mollis. Aliquam nec libero id elit dictum tristique. Nullam et ante erat. Donec a elit mauris. Vivamus faucibus ex mattis purus lobortis, et facilisis ante tincidunt. Integer maximus velit augue, vitae consectetur tellus tincidunt
    ultricies.
  </p>
  <p>
    Praesent eu laoreet magna. Praesent at ante non turpis pretium malesuada. Vivamus iaculis felis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras tempor mattis turpis non mollis. Nulla maximus tellus
    dui, maximus molestie sem ornare venenatis. Etiam eget tellus commodo nisi pharetra facilisis.
  </p>
  <p>
    Sed pretium ultricies dolor vitae elementum. Aenean sed nibh bibendum, pretium risus vel, semper orci. Duis et finibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque nec vulputate massa. Vivamus
    nec arcu dolor. Sed elementum in ex sed euismod. Vestibulum at arcu mattis, convallis sapien quis, faucibus lorem. Nam elementum pulvinar pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque volutpat dolor eget tempus
    auctor.
  </p>
  <p>
    Praesent facilisis aliquet est, at faucibus elit vestibulum eget. Nulla malesuada nunc a lectus consequat feugiat. Pellentesque et mauris vulputate, gravida dui ultrices, interdum leo. Phasellus vehicula metus magna, a elementum neque rhoncus quis. Nulla
    faucibus commodo blandit. Proin rutrum rutrum massa non facilisis. Cras porta eget metus ut feugiat. Praesent blandit commodo rhoncus. Aenean massa risus, dictum sit amet interdum in, tempus quis quam. In pharetra metus vel erat volutpat mattis. Vestibulum
    sagittis, nibh vitae maximus aliquam, libero neque efficitur est, non viverra eros orci eu dolor. Sed porttitor enim nec felis volutpat porta. Etiam ut consectetur turpis. Vestibulum mauris justo, malesuada pellentesque est cursus, bibendum mattis
    nisl. Proin elementum efficitur ultricies. Phasellus congue mauris semper magna elementum pharetra.
  </p>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。