Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use jQuery to eliminate the scroll bar of the web page". In the daily operation, I believe that many people have doubts about how to use jQuery to eliminate the scroll bar of the web page. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to use jQuery to eliminate the scroll bar of the web page". Next, please follow the editor to study!

Sometimes the web page needs to be able to scroll, but I don't want to scroll bar, so I have such a need. I wrote a vertical scroll bar with jq.

Pure css can also be implemented.

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

But edge and Firefox are not compatible, I thought that as long as I listen to the wheel event, it should be very easy to write with jq, so I wrote it myself.

Principle: need two div, the first is named box-wrap, it is an outer package, because it is vertical scrolling, so to fixed height, and then set overflow:hidden, so that the vertical direction beyond the height will be hidden

The second div is the div where the content needs to be scrolled, named box, which uses absolute positioning and moves relatively according to the wheel direction after listening for the mouse wheel event.

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 a fixed height, and let the background gradient, normally you can have a high auto to let the text open, the key of the style is to let the parent class relative and then let the subclass absolute, so that the class can move relative to the parent class

Js code

FunctioninitScroll () {

/ / js simulates vertical roller sliding

VarscrollEle=$ ('# box')

VarscrollWrap=$ ('# box-wrap')

The rolling speed of the varscrollSpd=20;// roller

VarMax_dist=scrollEle.height ()-scrollWrap.height (); / / the maximum distance between the bottom edges of two components

If (Max_dist0) {

If (tempPos > (- Max_dist)) {

TempPos-step > (- Max_dist)? tempPos=tempPos-step:tempPos=-Max_dist

}

} else {

If (tempPos (- Max_dist)? tempPos=tempPos-step:tempPos=-Max_dist

}

} else {

If (tempPos

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.