Jq removes the webpage scroll bar and jq removes the scroll bar.
Sometimes the page needs to be able to scroll, but I don't want a scroll bar. I wrote a vertical scroll bar using jq.
Pure css can also be implemented
.box::-webkit-scrollbar{display:none}
However, edge is not compatible with Firefox. If you want to listen to scroll wheel events, it should be very easy to write with jq, so you can write it yourself.
Principle: two divs are required. The first one is named box-wrap. It is an outer package. Because it is vertical scroll, the height must be fixed, and overflow: hidden should be set, in this way, the parts whose vertical direction exceeds the height will be hidden.
The second div is the div whose content needs to be rolled. It is named box and adopts absolute positioning. After listening to the scroll wheel event, it moves relative to the scroll wheel direction.
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 in it to set the height and make the background gradient. Normally, we can use the height auto to open the text, the key to style is to let the parent class relative and then let the subclass absolute, so that the subclass can move relative to the parent class
Js Code
Function initScroll () {// js simulates vertical scroll wheel sliding var scrollEle =$ ('# box'); var scrollWrap =$ (' # box-wrap '); var scrollSpd = 20; // The scroll wheel rolling speed var Max_dist = scrollEle. height ()-scrollWrap. height (); // the maximum distance between the bottom edge of the two components. if (Max_dist <= 0) {return;} scrollEle.css ('bottom ',-Max_dist); scrollEle. bind ('mousewheel ', function (event) {var step = scrollSpd; event. preventDefault (); event = event. originalEvent; // compatible with firefox eve Nt. delta = (event. wheelDelta )? Event. maid/120:-(event. detail | 0)/3; var tempPos = parseInt(scrollEle.css ('bottom '); 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 ('bottom ', tempPos) ;});} initScroll ();
It is mainly to listen to the scroll wheel event to determine the direction of the scroll wheel.
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
This statement is intended to be compatible with Firefox. All other browsers use the property name "wheelDelta". The value is 120 up,-120 down, and Firefox uses the property name "detail". The value is 3 down, -3 up
Each time a scroll wheel event is triggered, the position of the subclass is obtained, and the current position is adjusted based on the scroll wheel direction. Just judge the boundary.
Demo code
<Html> View Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
