better-scroll project encountered stepped pit collection of collecting and solutions

 

x1

>

<

>>

<<

O

better-scroll is focused on solving a mobile terminal (already supported PC) demand for a variety of plug-rolling scene. At its heart is for reference  iscroll  achieve. better-scroll native JS-based implementation, does not rely on any framework, it is also very easy to use.

important point:

1. When using the better-scroll is applied to the outer wrapper of the container, the rolling part is --- Content Note that, only the better-scroll processing vessel first child element, other elements will be ignored if there need to scroll part has several parts. We must bring an element he wrapped up
2. There is a better-scroll initialized, but can not scroll. We all know that the browser scroll principle is the height of the page viewport height over time, a scroll bar will appear. That parent container must have a fixed height and overflow hidden, the height of the sub-container is greater than the height of the parent element, in order to scroll
3. Scroll principle

   1 element.style {
   2     transition-duration: 0ms;
   3  transform: translate(0px, 0px) scale(1) translateZ(0px); 4  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 5 }

   Dynamically changed by sliding distance values ​​translate to achieve, it moves relative to the parent, there is a rolling effect, but here there next pit

4. A piece of rolling elements inside the element of the position: fixed failure, had the effect we want to achieve is a scroll to a certain height it has a ceiling effect, but it does not suck up the life and death, experiment a few times and found it was fixed relative to its parent container positioned ---

   fixed positioning of elements, if a parent has transform the style, value is not none, then the fixed positioning will fail, scale (), rotate () will make fixed positioning failure.

   Workaround: Use transform elements of style, do not contain sub-elements fixed location; css3 new attribute: flex; a good solution to the problem in the transform fixed failure; you can also add and remove classes class

5. Use the drop-down when loaded, the container must not be re-render the package child elements, such scroll events will fail, because the container to write the styles you first initialization, if re-render when these styles will be covered no scrolling style will not, unless you look at this re-initialize the container, but is not recommended to use too much trouble
6. When the DOM structure changes be sure to call the refresh () to ensure the normal rolling effect, re-render height

 

better-scroll is focused on solving a mobile terminal (already supported PC) demand for a variety of plug-rolling scene. At its heart is for reference  iscroll  achieve. better-scroll native JS-based implementation, does not rely on any framework, it is also very easy to use.

important point:

1. When using the better-scroll is applied to the outer wrapper of the container, the rolling part is --- Content Note that, only the better-scroll processing vessel first child element, other elements will be ignored if there need to scroll part has several parts. We must bring an element he wrapped up
2. There is a better-scroll initialized, but can not scroll. We all know that the browser scroll principle is the height of the page viewport height over time, a scroll bar will appear. That parent container must have a fixed height and overflow hidden, the height of the sub-container is greater than the height of the parent element, in order to scroll
3. Scroll principle

   1 element.style {
   2     transition-duration: 0ms;
   3  transform: translate(0px, 0px) scale(1) translateZ(0px); 4  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 5 }

   Dynamically changed by sliding distance values ​​translate to achieve, it moves relative to the parent, there is a rolling effect, but here there next pit

4. A piece of rolling elements inside the element of the position: fixed failure, had the effect we want to achieve is a scroll to a certain height it has a ceiling effect, but it does not suck up the life and death, experiment a few times and found it was fixed relative to its parent container positioned ---

   fixed positioning of elements, if a parent has transform the style, value is not none, then the fixed positioning will fail, scale (), rotate () will make fixed positioning failure.

   Workaround: Use transform elements of style, do not contain sub-elements fixed location; css3 new attribute: flex; a good solution to the problem in the transform fixed failure; you can also add and remove classes class

5. Use the drop-down when loaded, the container must not be re-render the package child elements, such scroll events will fail, because the container to write the styles you first initialization, if re-render when these styles will be covered no scrolling style will not, unless you look at this re-initialize the container, but is not recommended to use too much trouble
6. When the DOM structure changes be sure to call the refresh () to ensure the normal rolling effect, re-render height