All Projects → ustbhuangyi → Better Scroll

ustbhuangyi / Better Scroll

Licence: mit
📜 inspired by iscroll, and it supports more features and has a better scroll perfermance

Programming Languages

typescript
32286 projects
Vue
7211 projects
javascript
184084 projects - #8 most used programming language
stylus
462 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Better Scroll

Leaflet Gps
Simple leaflet control plugin for tracking gps position
Stars: ✭ 90 (-99.41%)
Mutual labels:  mobile-web
Components
MobileUI was created thinking of making your hybrid application faster and smaller since you only install what you are really going to use for UI.
Stars: ✭ 125 (-99.18%)
Mutual labels:  mobile-web
Mobile First Animation
Gesture-driven animation on the mobile web (React Conf 2019)
Stars: ✭ 1,998 (-86.85%)
Mutual labels:  mobile-web
Mobilebone
Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...
Stars: ✭ 1,357 (-91.07%)
Mutual labels:  mobile-web
Geomapping With Unity Mapbox
Geomap is the virtualization of data that maps a Country. Mapbox Unity SDK gives data(Global map layers of Streets, Buildings, Elev, and Satellite) generating custom 3D worlds for Mobile VR/AR apps.
Stars: ✭ 118 (-99.22%)
Mutual labels:  mobile-web
Fundcharts
轻量级canvas数据可视化组件库(可在web移动端、微信小程序、服务端nodejs运行)。包含折线图/面积图、饼图/环形图、柱状图、雷达图(蜘蛛图),散点图,K线图,组合图,持续更新及维护。
Stars: ✭ 143 (-99.06%)
Mutual labels:  mobile-web
Countly Sdk Cordova
Countly Product Analytics SDK for Cordova, Icenium and Phonegap
Stars: ✭ 69 (-99.55%)
Mutual labels:  mobile-web
Moerail
铁路车站代码查询 × 动车组交路查询
Stars: ✭ 186 (-98.78%)
Mutual labels:  mobile-web
Vue Slim Better Scroll
💇‍♀️ 简洁易用的/渐进式的 vue 移动端滚动组件,仿QQ的下拉刷新和上拉滚动无限加载体验
Stars: ✭ 124 (-99.18%)
Mutual labels:  mobile-web
Webfundamentals
Best practices for modern web development
Stars: ✭ 12,335 (-18.84%)
Mutual labels:  mobile-web
Jscost.org
JSCost.org - a JavaScript cost visualizer 💸
Stars: ✭ 101 (-99.34%)
Mutual labels:  mobile-web
Mobiscroll
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Stars: ✭ 1,510 (-90.07%)
Mutual labels:  mobile-web
Web.dev
The frontend, backend, and content source code for web.dev
Stars: ✭ 2,370 (-84.41%)
Mutual labels:  mobile-web
Storybook Mobile
A storybook addon that helps you create truly mobile-friendly components
Stars: ✭ 93 (-99.39%)
Mutual labels:  mobile-web
Cmui
Lightweight UI solution for mobile web.
Stars: ✭ 182 (-98.8%)
Mutual labels:  mobile-web
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-99.45%)
Mutual labels:  mobile-web
Taptaptap
🕹 Open Source Javascript Game
Stars: ✭ 131 (-99.14%)
Mutual labels:  mobile-web
Octoprint Touchui
A touch friendly interface for a small TFT module or phone
Stars: ✭ 226 (-98.51%)
Mutual labels:  mobile-web
Swip
a library to create multi device experiments
Stars: ✭ 2,109 (-86.12%)
Mutual labels:  mobile-web
Mobile Select Area
手机联动选择地区
Stars: ✭ 157 (-98.97%)
Mutual labels:  mobile-web

better-scroll

npm version downloads Build Status Package Quality codecov.io Gitpod Ready-to-Code

中文文档

1.x Docs

2.x Docs

2.x Demo

Note: 1.x is not maintained. please migrate your version as soon as possible

Install

npm install better-scroll -S # install 2.x,with full-featured plugin.

npm install @better-scroll/core # only CoreScroll
import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'

let bs = new BScroll('.wrapper', {})

CDN

BetterScroll with full-featured plugin.

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

<!-- minify -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

Only CoreScroll

<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

<!-- minify -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

What is BetterScroll ?

BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of iscroll, so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.

BetterScroll is implemented with plain JavaScript, which means it's dependency free.

Getting started

The most common application scenario of BetterScroll is list scrolling. Let's see its HTML:

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling
</div>

In the code above, BetterScroll is applied to the outer wrapper container, and the scrolling part is content element. Pay attention that BetterScroll handles the scroll of the first child element (content) of the container (wrapper) by default, which means other elements will be ignored. However, for BetterScroll v2.0.4, content can be specified through the specifiedIndexAsContent option. Please refer to the docs for details.

The simplest initialization code is as follow:

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

BetterScroll provides a class whose first parameter is a plain DOM object when instantiated. Certainly, BetterScroll inside would try to use querySelector to get the DOM object.

The principle of scrolling

Many developers have used BetterScroll, but the most common problem they have met is:

I have initiated BetterScroll, but the content can't scroll.

The phenomenon is 'the content can't scroll' and we need to figure out the root cause. Before that, let's take a look at the browser's scrolling principle: everyone can see the browser's scroll bar. When the height of the page content exceeds the viewport height, the vertical scroll bar will appear; When the width of page content exceeds the viewport width, the horizontal bar will appear. That is to say, when the viewport can't display all the content, the browser would guide the user to scroll the screen with scroll bar to see the rest of content.

The principle of BetterScroll is samed as the browser. We can feel about this more obviously using a picture:

布局

The green part is the wrapper, also known as the parent container, which has fixed height. The yellow part is the content, which is the first child element of the parent container and whose height would grow with the size of its content. Then, when the height of the content doesn't exceed the height of the parent container, the content would not scroll. Once exceeded, the content can be scrolled. That is the principle of BetterScroll.

Plugins

Enhance the ability of BetterScroll core scroll through plugins, such as

import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'

let bs = new BScroll('.wrapper', {
  pullUpLoad: true
})

Please see for details, Plugins.

Using BetterScroll with MVVM frameworks

I wrote an article When BetterScroll meets Vue (in Chinese). I also hope that developers can contribute to share the experience of using BetterScroll with other frameworks.

A fantastic mobile ui lib implement by Vue: cube-ui

Contributing

Online one-click setup

You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for contributing. With a single click it will launch a workspace and automatically:

  • clone the better-scroll repo.
  • install all of the dependencies.
  • run yarn vue:dev,
  • run yarn docs:build and yarn docs:dev.

Open in Gitpod

Using BetterScroll in the real project

If you want to learn how to use BetterScroll in the real project,you can learn my two practical courses(in Chinese)。

High imitating starvation takeout practical course base on Vue.js

Project demo address

QR Code

Music App advanced practical course base on Vue.js

Project demo address

QR Code

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].