집 >웹 프론트엔드 >HTML 튜토리얼 >jQuery를 사용하여 웹 페이지의 스크롤 막대를 제거하는 방법

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

php中世界最好的语言원래의: 2018-02-22 09:38:481935검색

이번에는 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 = $(&#39;#box&#39;) ;
        var scrollWrap = $(&#39;#box-wrap&#39;) ;
        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 중국어 웹사이트의 다른 관련 기사를 주목하세요!