A hover 브라우저 하단에 보이지 않는 방법

제목이 명확한 지 잘 모르겠으므로 설명 할 단어가 거의 없습니다. div '(200px x 400px CONSTANT)라고하는 몇 가지 작은 요소가 있습니다. 각각에는 약 20 줄의 텍스트가있는 단락이 있습니다. 물론, 작은 div에 대해서는이 정도입니다.. 내가하고 싶은 것은 :

1. 일반적으로 div에는 overflow: hidden 속성이 있습니다.
2. 마우스 오버 (:hover)에서이 속성이 overflow: auto;로 변경되고 스크롤 막대가 나타납니다.

무엇이 문제입니까? 단락 텍스트와 스크롤 막대 사이에 약간의 공백 (패딩 또는 여백)을 원합니다. 단락에 대칭 margin: 20px;가 있다고 가정 해 봅시다. 그러나 :hover가 트리거 된 후 스크롤 막대가 나타나고 단락의 전체 오른쪽이 "scrollbar-width" px 왼쪽으로 이동합니다. 문장은 다른 줄로 나뉘어져 있으며 전체 단락이 다르게 보이므로 매우 성 가시고 사용자 친화적이지 않습니다. CSS를 어떻게 설정할 수 있습니까? 호버 후 유일한 변경은 scroolbar의 모양입니까?

다시 말해:

/* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}

/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical */
div:hover p {margin: 20px;} /* With scrollbar */

strong에서 내 문제를 설명하면서 약간의 스 니펫을 작성했습니다. 모든 것이 명확 해지기를 바랍니다.)] 지금 거의 두 시간 동안 해결책을 찾고 있는데, 제 질문은 매우 독특하고 흥미 롭습니다.

div.demo1 {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background: #ddd;
}
div.demo1:hover {
  overflow: auto;
}
div.demo1 p {
  background: #eee;
  margin: 20px;
}
div.demo2 {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background: #ddd;
}
div.demo2:hover {
  overflow: auto;
}
div.demo2 p {
  background: #eee;
  margin: 20px 40px 20px 20px;
}
div.demo2:hover p {
  margin: 20px 20px 20px 20px;
}

<div class="demo1">
  <p>
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
  </p>
</div>
<br>
<br>
<strong>As you can see, on hover right side of the paragraph "moves" left. But I want something like:</strong>
<br>
<br>
<div class="demo2">
  <p>
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
  </p>
</div>

<strong>But with a "perfect" scrollbar width (in this example I used 20px)</strong>

브라우저와 OS에 따라 모든 스크롤 막대가 다를 수 있으므로 javascript를 사용해야합니다.

여기서 멋진 스 니펫을 발견했습니다 : http://davidwalsh.name/detect-scrollbar-width

그리고 그 예는 다음과 같습니다. http://jsfiddle.net/a1m6an3u/

Js 코드는 div .scrollbar-measure, 스크롤바의 크기를보고 돌려주십시오.

다음과 같이 보입니다 :

var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

그래서 jquery 코드를 빠르게 추가했지만 JS에서만 할 수 있다고 생각합니다.

톰 톰톰의 대답은 환상적으로 작동하지만 다소 불필요한 것으로 보이는 외부 CSS 스 니펫이 필요하고 유리의 대답에는 jQuery가 필요합니다. 약간 더 최신의 자체 포함 된 답변 (JavaScript 모듈 설정에도 사용 가능)은 다음과 같습니다.

class TempScrollBox {
  constructor() {
    this.scrollBarWidth = 0;

    this.measureScrollbarWidth();
  }

  measureScrollbarWidth() {
    // Add temporary box to wrapper
    let scrollbox = document.createElement('div');

    // Make box scrollable
    scrollbox.style.overflow = 'scroll';

    // Append box to document
    document.body.appendChild(scrollbox);

    // Measure inner width of box
    this.scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;

    // Remove box
    document.body.removeChild(scrollbox);
  }

  get width() {
    return this.scrollBarWidth;
  }
}

이 클래스는 다음과 같이 사용할 수 있습니다.

let scrollbox = new TempScrollBox();

console.log(scrollbox.width) //-> 17 (Windows, Chrome)

바이올린 : https://jsfiddle.net/nu9oy1bc/

innerWidth 스크롤 막대를 포함하여 브라우저 뷰포트의 너비를 반환합니다.

읽기 전용 Window 속성 innerWidth는 창의 내부 너비를 픽셀 단위로 반환합니다. 여기에는 세로 스크롤 막대의 너비가 포함됩니다 (있는 경우).

clientWidthdocument와 같은 루트 요소에 사용될 때 스크롤 막대를 제외하고 뷰포트의 너비를 반환합니다.

ClientWidth가 루트 요소 (요소)에서 사용되거나 문서가 쿼크 모드 인 경우 뷰포트의 너비 (스크롤바 제외)가 반환됩니다.

let scrollbarWidth = (window.innerWidth - document.body.clientWidth) + 'px';

두 값을 빼면짜리 스크롤 막대의 너비가 나타납니다.

이 예제는 보통 다음을 반환합니다 : 15px

여기에 순수한 CSS 솔루션이 있습니다.
텍스트 스크롤 오른쪽에 스크롤 막대가있는 보이지 않는 div를 만듭니다.

<div class="container">
  <div class="text">Your very and very long text here</div>
  <div class="scrollbar-width"></div>
</div>
<style>
.container {
   display: flex;
   width: 100px; /* to make scrollbar necessary */
   height: 30px; /* to make scrollbar necessary */
   border: 1px solid blue;
}
.text {
   flex: 1; 
   float: left;
   overflow-y: hidden; 
}
.scrollbar-width {
   float: left; 
   overflow-x: hidden; 
   overflow-y: scroll; 
   visibility: hidden;
}
.scrollbar-width::-webkit-scrollbar { /* for debugging */
  background-color: red;
}
.text:hover {
   overflow-y: scroll; 
}
.text:hover + .scrollbar-width {
  display: none;
}
</style>

때 scrollbar-width div에는 visibility: hidden 여전히 공간이 필요합니다.

이제 나만의 스크롤바를 표시하기로 결정하면 display: none 보이지 않는 scrollbar-width div이므로 더 이상 공간을 차지하지 않으므로 text div가 사용 가능한 모든 공간을 채우고 넓어집니다.

확인하려면 visibility: hidden;의 스타일에서 scrollbar-width div. 그런 다음이 자리 표시 자 div가 처음에 공간을 차지하는 방법 (위의 "디버깅의 경우"스타일에 따라 빨간색으로 표시됨)을 가리키면 마우스가 사라지고 텍스트 div-s 스크롤 막대로 대체됩니다.

JS 바이올린 링크 : https://jsfiddle.net/rb1o0tkn/

나와 같은 누군가가 "브라우저 스크롤 막대 너비를 얻는 방법"을 검색 하여이 질문을 발견 한 경우 추가 CSS 클래스가없는 jQuery 구현은 다음과 같습니다.

var div = $("<div style='overflow:scroll;position:absolute;top:-99999px'></div>").appendTo("body"),
    width = div.prop("offsetWidth") - div.prop("clientWidth");
div.remove();

console.log(width);

또는 원하는 경우 JSFiddle 입니다.

아이디어에 감사드립니다 tomtomtom 's answer