Recently, I have been working on a project: titlebar at the top, rotating banner at the bottom (that is, ordinary rotating chart), general classified article content at the bottom, sliding over a certain distance to classify top effect, similar to Amap, search and input "geek map" effect;Copy the code

Slide top with pull-up loading for more effects,

  • Use VUE components to form the whole page, titlebar at the top, rotating banner in the middle, iscroll sliding part at the bottom, initialize iscroll at the bottom when sliding to the top, which leads to the failure of page listening sliding;
  • Jump to secondary page back iscroll failure, because the page with sliding download more, more native JS implementation problems, and then want to further implementation on the basis of IScroll, how to effectively avoid iscroll brought many problems;

Implementation method:

The first edition

  • Iscroll area gray select area icon 1, more than some PX elements icon 1 positioned in a certain area, the overall banner is fixed, just switch icon 1 position;
  • When the element is lower than a certain PX, icon 1 returns to its original position, the effect is raw, and the original scroll of the page fails.

The second edition

  • The whole page iscroll, the upper positioning of the banner is separated from the IScroll container area, the bottom div covers the position of the bottom of the banner, scroll sliding, the outermost banner is like a layer cloth changed above the sliding, the effect is poor;

The third edition

  • The sliding banner slides along the page, displays icon 1 beyond the area, and hides the authenticity of icon 1 inside the IScroll container

The solution

  • First of all, the whole page is used as iscroll container, the banner is nested inside iscroll container, listen for the scroll event of Scroll, this.y shows the top element when it exceeds the sliding area, hide the red marked part inside iscroll container, and display the elements outside iscroll container. Fixed does not work in the iscroll region

Problems with iscroll

  • [Fixed] All native sliding within the iscroll area block is disabled
  • The page monitor scroll event is disabled.
  • Click error, you can use TAB to solve the problem, but tap is sensitive, will trigger unexpected events on the page,

To sum up, the better-Scroll plug-in appears to realize some effects of IScroll. This problem hides the banner through visual effects, causing a sliding area under part of the effect of the banner to slide.