JS 캡처 페이지 스크롤 막대

이번에는 페이지 스크롤 막대를 캡처하는 JS를 가져왔습니다. JS가 페이지 스크롤 막대를 캡처할 때의 주의 사항은 무엇입니까?

최근 플러그인을 작성하는 과정에서 스크롤 바가 있는지 확인하기 위해 JS를 사용해야 합니다. 검색 후 일반적인 방법은 비슷하지만 약간 장황하고 코드가 간결하지 않습니다. 마지막으로 여러가지 방법을 참고해서 비교적 간단한 방법을 작성했습니다

Preface

최근 플러그인을 작성하는 과정에서 스크롤바가 있는지 확인하기 위해 JS를 사용하게 됐는데요. 일반적인 방법은 비슷하지만 모두 약간 장황하고 코드가 간결하지 않습니다. 마지막으로 다양한 방법을 참고하여 비교적 간단한 방법을 작성하였습니다. 스크롤바를 판단할 때 스크롤바의 너비도 계산해야 합니다. 이 글을 통해 공유하겠습니다.

스크롤 막대를 판단해야 하는 이유

스크롤 막대를 판단해야 하는 필요성은 팝업 창 플러그인에서 자주 사용됩니다. 대부분의 팝업 창에는 <a href="%EA%B0%80" target="_blank">overflow<code><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>: hidden 的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。

为了增强用户体验，通过判断是否有滚动条而添加 <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a> 属性以抵消 overflow: hidden 之后的滚动条位置。

判断是否有滚动条的方法

其实只需要一行 JS 就可以，测试兼容 IE7

function hasScrollbar() {
  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

一般情况下，使用 document.body.scrollHeight > window.innerHeight 就可以判断。

但是在 IE7，IE8 中 window.innerHeight 为 underfined，所以为了兼容 IE7、IE8，需要使用document.documentElement.clientHeight 属性计算窗口高度。

计算滚动条宽度的方法

还是以弹窗为例，因为 IE 10 以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式（其中 IE 10 以上浏览器可以通过 CSS 属性还原原始的滚动条样式），所以为了进一步增强用户体验，我们还需要计算滚动条的宽度，根据情况添加合理的 margin-left 数值。

计算滚动条宽度的方法比较简单，新建一个带有滚动条的 p 元素，通过该元素的 offsetWidth 和 clientWidth 的差值即可获得，我在此借鉴 Magnific-popup 中的方法

function getScrollbarWidth() {
  var scrollp = document.createElement("p");
  scrollp.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild(scrollp);
  var scrollbarWidth = scrollp.offsetWidth - scrollp.clientWidth;
  document.body.removeChild(scrollp);
  return scrollbarWidth;
}

总结

使用 JS 实现一个功能可能并不困难，但作为编程人员应该时刻思考如何更简单更优雅的实现这个功能，并且时刻以提升用户体验为原则。对于条件判断，也许十行的逻辑判断可能只需要一行，最近感受极为深刻，而且要善于使用三元表达式替代 if..else : 숨겨진 속성입니다. 페이지가 비교적 긴 경우 이 속성을 추가하면 페이지가 흔들립니다.

사용자 경험을 향상하려면 <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a><a href="http://www.php.cn/code/8418.html" target="_blank"> 속성을 ​​추가하세요. <code>overflow: hide 이후 스크롤 막대 위치를 오프셋합니다.

스크롤바가 있는지 확인하는 방법

실제로 JS는 한 줄만 필요합니다. 테스트는 IE7과 호환됩니다.

rrreee일반적으로 document.body.scrollHeight를 사용합니다. > window .innerHeight 를 판단할 수 있습니다.
그러나 IE7 및 IE8에서는 window.innerHeight가 underfined되어 있으므로 IE7 및 IE8과 호환되려면 document.documentElement를 사용해야 합니다. .clientHeight 속성 창 높이를 계산합니다.

스크롤바 너비를 계산하는 방법

은 여전히 ​​팝업창을 예로 들고 있는데, IE 10 이상과 모바일 브라우저의 스크롤바는 페이지를 차지하지 않는 투명한 스타일이기 때문입니다. 너비(IE 10 이상 브라우저는 CSS 속성을 사용하여 원래 스크롤 막대 스타일을 복원할 수 있음)이므로 사용자 경험을 더욱 향상하려면 스크롤 막대의 너비를 계산하고 합리적인 를 추가해야 합니다. 상황에 따라 margin-left 값을 조정합니다.

스크롤 너비 계산 방법 bar는 상대적으로 간단합니다. 스크롤 막대가 있는 새 p 요소를 생성합니다. 이는 요소의 offsetWidth와 clientWidth의 차이로 얻을 수 있습니다. >Magnific-popup here. Method in code>

rrreee🎜🎜Summary🎜🎜🎜JS를 사용하여 함수를 구현하는 것은 어렵지 않을 수 있지만, 프로그래머라면 이 함수를 어떻게 구현해야 할지 항상 고민해야 합니다. 간단하고 우아하게, 항상 사용자 경험 개선에 집중하세요. 조건부 판단 🎜의 경우 아마도 10줄의 논리적 판단이 1줄만 필요할 수도 있다는 것을 최근에 깊이 느꼈습니다. , if..else 를 대체하려면 삼항 expression🎜을 잘 사용해야 합니다. 코드를 간소화합니다. 🎜🎜문서 높이가 🎜시각적 영역🎜높이보다 큰지 판단하는 것이 원칙입니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜jQuery의 세 가지 $() 유형에 대한 자세한 설명🎜🎜🎜🎜🎜jQuery 버전 선택 방법🎜🎜🎜🎜🎜H5 디자인 팁 요약🎜🎜🎜

위 내용은 JS 캡처 페이지 스크롤 막대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!