jQuery를 사용하여 웹 페이지의 스크롤 막대를 제거하는 방법

이번에는 jQuery를 사용하여 웹 페이지의 스크롤 막대를 제거하는 방법을 보여 드리겠습니다. jQuery를 사용하여 웹 페이지의 스크롤 막대를 제거할 때의 주의사항은 무엇입니까? .

때때로 웹페이지는 스크롤할 수 있어야 하는데 스크롤바를 원하지 않는 경우가 있습니다. jq를 사용하여 세로 스크롤 막대를 작성했습니다.

순수한 CSS도 구현할 수 있습니다

.box::-webkit-scrollbar{display:none}

하지만 edge는 Firefox와 호환되지 않습니다. 휠 이벤트를 모니터링하는 한 jq로 작성하면 매우 간단할 것이라고 생각하여 직접 작성했습니다.

원리: 두 개의 div가 필요합니다. 첫 번째 패키지는 외부 패키지이므로 수직 방향으로 스크롤되도록 overflow:hidden을 설정해야 합니다. 높이를 초과하면 숨겨집니다

두 번째 div는 내용을 스크롤해야 하는 div이며 절대 위치 지정을 사용합니다. 마우스 휠 이벤트를 들은 후 휠 방향에 따라 상대적으로 이동합니다

. css code

#box-wrap{
                position: relative;
                width: 100% ;
                height: 500px ;
                overflow: hidden;
            }
            #box{
                position: absolute;
                width: 100% ;
                height: 1500px ;
                background: linear-gradient(blue,white) ;
            }

효과를 보여주기 위해 내부에 상자의 높이를 고정하고 배경 그라데이션을 적용했습니다. 일반적으로 텍스트가 확장되도록 높이를 자동으로 지정할 수 있습니다. 상위 클래스를 기준으로 한 다음 하위 클래스를 절대 클래스로 만들어 하위 클래스를 상위 클래스를 기준으로 이동할 수 있습니다

js 코드

function initScroll(){
        //js模拟垂直滚轮滑动
        var scrollEle = $('#box') ;
        var scrollWrap = $('#box-wrap') ;
        var scrollSpd = 20 ;//滚轮滚动的速度
        var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离
        if(Max_dist<=0){
            return ;
        }
        scrollEle.css(&#39;bottom&#39;,-Max_dist) ;
        scrollEle.bind(&#39;mousewheel&#39;,function(event){
            var step = scrollSpd ;
            event.preventDefault() ;
            event = event.originalEvent ;
            //兼容firefox
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            var tempPos = parseInt(scrollEle.css(&#39;bottom&#39;)) ;
            console.log(tempPos) ;
            if(event.delta>0){
                if(tempPos>(-Max_dist)){
                    tempPos-step>(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;
                }
            }else{
                if(tempPos<0){
                    tempPos+step<0? tempPos = tempPos+step : tempPos = 0 ;
                }
            }
            //console.log(tempPos) ;
            scrollEle.css(&#39;bottom&#39;,tempPos) ;
        });
    }
    initScroll() ;

가장 중요한 것은 휠 이벤트를 듣고 휠 방향을 결정하는 것입니다

event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;

이것은 다른 브라우저는 휠델타(wheelDelta)라는 속성명이 있는데 그 값은 아래로 -120, 파이어폭스의 속성명은 디테일, 아래로 -3으로 값이 표현됩니다

스크롤 휠 이벤트가 발생하면 하위 클래스의 위치가 얻어지고 스크롤 휠의 방향에 따라 현재 위치가 조정됩니다. 경계를 판단하려면 주의하세요. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

스팬 태그 스타일의 너비 속성을 설정하는 방법

html과 xhtml 및 xml의 차이점은 무엇입니까

페이지 팝을 차단하기 위해 상위 페이지를 작동하는 방법 iframe의 하위 페이지에 대한 레이어 효과

HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.

배경색 깜박임을 달성하기 위해 버튼 트리거를 사용하는 방법

위 내용은 jQuery를 사용하여 웹 페이지의 스크롤 막대를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!