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

In this article, the editor introduces in detail "how to solve the invalid scroll html5", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to solve the invalid scroll html5" can help you solve your doubts.

1. We usually use three-stage layout on the mobile end. For example

But some people will find that sometimes the scrolling effect doesn't work, right? Hey, the first thing to pay attention to at this point is that the element that loads better-scroll can only have one direct child element.

This form and content this layer of boxes can not be given a fixed height? Better-scroll will take effect when the height of the content is larger than the outer main box.

2. Then the second point is that today's highlight has attracted the top effect.

I believe that those who have used this plug-in will know that our roller does not work here, which also means that the onscroll event can not be used so how to do the suction effect? Provides us with such a method in better-scroll? Bs.on ("scroll", function (e) {})? At this time, e can print out an x y object about scrolling? Note that for this method to work, we need to be in? The property of adding probetype to the bs object is written as follows

Let bs=new bscroll ("main", {

Probetype:2

})

And then when we get here, some people will say, since we can get the y value, can't we use the previous method to add a class class name about fixed positioning to the elements that need to be capped, right? And then it leads to another giant pit of better-scroll.

Fixed positioning elements, if the parent has a transform style, the value is not none, then fixed positioning will be invalid, scale (), rotate () will invalidate fixed positioning. ? So when we use better-scroll events in the box, our absolute positioning will fail and our ceiling effect will fail. So I came up with another way to compare low to simulate the suction effect. We can also clone the box that needs to be sucked in the scroll method and dynamically add it to anywhere except main when we reach the desired height through the e.y value. Be careful not to add main here. And then set the desired position through absolute positioning? Delete the unwanted location? When deleting here, you need to judge whether to add it or not. When adding, be careful not to add it many times!

3. Click event invalidation

After referencing the plug-in, the elements inside the box will have the problem of click event invalidation? At this point, we need to put this property in which object of bs? Click:true

4 、? Return to the top operation question

As mentioned earlier, after the introduction of this plug-in, the onscroll event will not be triggered, so does it mean that scrolltop does not work? So what should we do to return to the top operation?

At this point, there is a method in the better-scroll event, bs.scrolltop (0mem0j1000), which allows us to return to the top? 0Power0 is to return 0,0 position, and the third parameter is the length of time it takes to return.

5. Pull-up loading effect and drop-down refresh

Here is a brief introduction to the use of several api

1 let bs = new bscroll ("main", {

2 pullupload: true,// pull-up

3 pulldownrefresh: true,// drop-down

4 / / can also be written as object mode

5 / / Note pull-up is not supported

6 / / pulldownrefresh: {

7 / pull down to 100 before triggering.

8 / / threshold:100

9 / then let go and return to the 50 position

10 / / stop:50

11 / /}

12})

thirteen

14 bs.on ("pullingdown", function () {

15 / / "pullingup pull-up"

16 console.log ("drop-down refresh")

17 / / this event begins to tell the browser to start a drop-down refresh.

18 / / then make a request for some data

nineteen

20 / / when the data request comes in

21 / / tell the browser to end the drop-down

22 bs.finishpullup (); / / pull-up ends

23 bs.finishpulldown ()

24 / / the dom can be refreshed after the structure is changed.

25 bs.refresh ()

26})

After reading this, the article "how to solve the problem of invalid scroll html5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.