JS가 페이지 스크롤 막대를 결정합니다.

이번에는 페이지 스크롤바를 판단하는 JS를 가져오겠습니다. JS가 페이지 스크롤바를 판단할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다.

서문

최근 플러그인을 작성하는 과정에서 스크롤바가 있는지 확인하기 위해 JS를 사용해야 하는데, 검색 후 일반적인 방법은 비슷하지만 모두 조금 장황하고, 코드가 충분히 간결하지 않습니다. 마지막으로 다양한 메소드를 참고하여 비교적 간단한 메소드를 작성했습니다. 스크롤 막대를 판단하는 동안 스크롤 막대의 너비도 계산해야 합니다. 이 내용은 이 기사를 통해 공유하겠습니다.

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

스크롤 막대를 판단해야 하는 필요성은 팝업 창 플러그인에서 자주 사용됩니다. 왜냐하면 대부분의 팝업 창에는 overflow:hidden이 추가되기 때문입니다. 속성, 페이지가 상대적으로 긴 경우 이 속성을 추가하면 페이지가 흔들립니다. overflow: hidden 的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。

为了增强用户体验，通过判断是否有滚动条而添加 margin-left 属性以抵消 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

사용자 경험을 향상하려면 스크롤 막대가 있는지 확인하여 overflow:hidden 이후 스크롤 막대의 위치를 ​​오프셋하는 margin-left 속성을 ​​추가하세요. .

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

실제로 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를 사용하여 함수를 구현하는 것은 어렵지 않을 수 있지만, 프로그래머라면 이 함수를 어떻게 구현해야 할지 항상 고민해야 합니다. 간단하고 우아하게, 항상 사용자 경험 개선에 집중하세요. 조건부 판단의 경우 아마도 열 줄의 논리적 판단이 한 줄만 필요할 수도 있을 것 같습니다. 최근에 깊은 감명을 받았는데, 코드를 간소화하기 위해 if..else 대신 삼항식을 잘 사용하는 것 같습니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜페이지를 렌더링하기 위해 응답 쓰기 저장을 적용하는 방법🎜🎜🎜🎜🎜JS를 사용하여 애니메이션 진행률 표시줄 기능 만들기🎜🎜🎜

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