페이지에 스크롤 막대가 있는지 여부를 결정하기 위해 JS에는 어떤 속성이 있습니까?

이번에는 페이지에 스크롤 막대가 있는지 확인하는 데 사용할 수 있는 JS의 속성과 페이지에 스크롤 막대가 있는지 확인하는 데 사용할 수 있는 노트가 무엇인지 보여 드리겠습니다. 실제 사례를 살펴보겠습니다.

서문

최근 플러그인을 작성하는 과정에서 스크롤바가 있는지 확인하기 위해 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 중국어 웹사이트의 다른 관련 기사를 주목하세요! RECEMEDRENDED 읽기 : 🎜🎜🎜VUE.JS 프로젝트 NGINX 배포 단계 세부 설명 🎜🎜🎜🎜🎜commonly 사용 6 JS 분류 알고리즘 및 비교 🎜🎜🎜🎜🎜 컨트리 션 웹 팩 소스 코드 🎜🎜🎜

위 내용은 페이지에 스크롤 막대가 있는지 여부를 결정하기 위해 JS에는 어떤 속성이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!