效果展示

CSS方法

<ul class="content"><li>分类列表1</li><li>分类列表2</li><li>分类列表3</li>...<li>分类列表100</li></ul>//css.content{height: 150px;background-color: #ff8198;overflow-y: scroll;
}

BScroll方法

<template><div class="wrapper"><ul class="content"><li>分类列表1</li><li>分类列表2</li>...<li>分类列表100</li></ul></div>
</template><script>
import BScroll from 'better-scroll'export default {name: "Category",data(){return {scroll:null}},//组件创建完后调用created() {//new BScroll('.wrapper')},mounted() {//console.log(document.querySelector('.wrapper'));this.scroll = new BScroll(document.querySelector('.wrapper'))}}
</script><style scoped>
.wrapper{height: 150px;background-color: #ff8198;overflow: hidden;
}
</style>

踩坑

1.注意不要在created()方法中里面用BScroll，因为此方法是在组件创建时调用，如果把BScroll写里面会获取不到元素。
2.上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。所以，这里我们要滚动的是ul里面的li，但是ul不能作为父元素，否则只有一个li是滚动的，不是我们要的效果，所以要在ul外面包一个div。
3.切记，触摸滚动，而不是鼠标滚动，不要像我一样傻傻的用鼠标滚动，然后就看不到局部滚动的效果，还以为是哪里用的不对。解释：因为这个框架主要用于移动端，而我们移动端哪里来的鼠标，不就是触摸嘛。

实现局部滚动的两种方法：1.三行css代码2.使用BScroll框架相关推荐

html怎么让页面没有滑动条,使用CSS实现无滚动条滚动的两种方法
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...
控制鼠标滚轮滚动的两种方法
1 $(function(){ 2 // jquery 兼容的滚轮事件 3 var strat = true; 4 var mark = 0; 5 $(document).on("mouse ...
两种方法教你一行代码实现探索性数据分析报告
Python数据分析
c语言 | 求100-200之间的素数（两种方法）
首先要求100-200之间的素数,要知道素数是什么? 素数就是质数,只能被自身和1整除下面会介绍两种方法: 常规方法: 代码: int main() { int i = 0; for ...
mysql php gpl_MySQL_MySQL数据库远程访问权限如何打开(两种方法)，下载GPL版本安装MySQL Community - phpStudy...
MySQL数据库远程访问权限如何打开(两种方法) 下载GPL版本安装 MySQL Community Edition(GPL) Community (GPL) Downloads » 在我们使用mys ...
实现auto_ptr的两种方法
我们都知道,实现auto_ptr有两种方法: 第一种方法:在上一篇博客中我已经实现了,主要思想是管理权转移. 第二种方法:它是我们c++标准库中以前的一个版本,主要思想是在auto_ptr类中除了有一 ...
【转】系统缓存全解析二：动态缓存（2）－页面局部缓存的两种方式
有时缓存整个页面是不现实的,因为页的某些部分可能在每次请求时都需要变化.在这些情况下,只能缓存页的一部分.顾名思义,页面部分缓存是将页面部分内容保存在内存中以便响应用户请求,而页面其他部分内容则为动态 ...
Qt创建多线程的两种方法
来源:https://github.com/czyt1988/czyBlog/tree/master/tech/QtThread 1.摘要 Qt有两种多线程的方法,其中一种是继承QThread的run ...
计算机视觉之人脸识别(Yale数据集)--HOG和ResNet两种方法实现
1.问题描述在给定Yale数据集上完成以下工作:在给定的人脸库中,通过算法完成人脸识别,算法需要做到能判断出测试的人脸是否属于给定的数据集.如果属于,需要判断出测试的人脸属于数据集中的哪一位.否则, ...
Matlab画三维图的两种方法
2010-11-07 21:20:30 zz: http://hi.baidu.com/mynana/blog/item/3c79c1ce6b65cb0393457e7a.html 这几天看到Ras ...

实现局部滚动的两种方法：1.三行css代码2.使用BScroll框架

实现局部滚动的两种方法

效果展示

CSS方法

BScroll方法

踩坑

实现局部滚动的两种方法：1.三行css代码2.使用BScroll框架相关推荐

最新文章

热门文章