How to use jQuery to eliminate scroll bars on web pages-HTML Tutorial-php.cn

How to use jQuery to eliminate scroll bars on web pages

php中世界最好的语言

Release： 2018-02-22 09:38:48

Original

1885 people have browsed it

This time I will show you how to use jQuery to eliminate the scroll bar of a web page. What are the precautions for using jQuery to eliminate the scroll bar of a web page? The following is a practical case, let's take a look.

Sometimes web pages need to be able to scroll, but they don’t want scroll bars. I encountered such a need. I wrote a vertical scroll bar using jq.

Pure css can also be implemented

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

Copy after login

But edge is not compatible with Firefox. I thought that it would be very simple to write it with jq as long as it monitors the wheel event, so I wrote it myself.

Principle: You need two divs. Let’s name the first one box-wrap. It is an outer package. Since it scrolls vertically, the height must be fixed, and then set

overflow:hidden, so that the part that exceeds the height in the vertical direction will be hidden

The second div is the div whose content needs to be scrolled, named box, using

absolute positioning, after monitoring After the mouse wheel event, the relative movement is based on the direction of the wheel

css code

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

Copy after login

In order to demonstrate the effect, I wrote the box inside to have a fixed height and let the background gradient. Normally, the height can be set to auto Just hold the text open. The key to the style is to make the parent class relative and then make the subclass absolute, so that the subclass can move relative to the parent class

js code

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() ;

Copy after login

The main thing is to listen for wheel events , so as to determine the direction of the wheel

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

Copy after login

This sentence is for compatibility with Firefox. Other browsers have the attribute name wheelDelta, and the value is expressed as 120 upwards, -120 downwards. Firefox has the attribute name as detail, and the value indicates For 3 down, -3 up

Every time the wheel event is triggered, the position of the subclass will be obtained, and then the current position will be adjusted according to the direction of the wheel. Just pay attention to judge the boundary

demo code

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!