How to use jQuery to eliminate scroll bars on web pages

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}

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

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 = $('#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() ;

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;

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

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!

Related reading:

How to set the width attribute for span tag style

What is the difference between html, xhtml and xml

#How to operate the subpage of iframe to shield the page pop-up layer effect from the parent page

It is invalid to define multiple class attributes in HTML

How to use button trigger to achieve background color flashing

The above is the detailed content of How to use jQuery to eliminate scroll bars on web pages. For more information, please follow other related articles on the PHP Chinese website!