search

Home  >  Article  >  Web Front-end  >  Example tutorial on scrolling content area on mobile terminal

Example tutorial on scrolling content area on mobile terminal

零下一度
零下一度Original
2017-06-26 10:23:481426browse

自己的总结的一些方法，如果有什么新的好的方法希望能够交流：

　　　　　　1.给定位(导航栏)(底部)

　　　　　　　　nav{

　　　　　　　　　　position:fixed;

　　　　　　　　　　top:0rem;

　　　　　　　　};

　　　　　　　　footer{

                         position:fixed;

　　　　　　　　　bottom:0rem;

　　　　　　　 };

但是这个方法会有弊端，在你给nav设置定位时，内容区域就会顶头出现，就需要给内容区域设置定位设置top值nav的高度方可。

2.使用IScroll插件。

   例如：　　　

　　　　　　













  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域





底部





3.第三那种弹性盒子：弊端(会改变nav的高度)；

　　














  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域



底部



　　

如果还有其他好的方法，希望能一起交流；

The above is the detailed content of Example tutorial on scrolling content area on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summarize the example tutorial of setting css style in ReactJsNext article：Summarize the example tutorial of setting css style in ReactJs

Related articles

See more