better-scroll的横向滚动

最新推荐文章于 2024-05-11 06:52:18 发布

加菲猫的鳄鱼

最新推荐文章于 2024-05-11 06:52:18 发布

阅读量2.4k

点赞数

文章标签： better-scroll

本文链接：https://blog.csdn.net/Anticipate_/article/details/94402873

版权

在vue项目中使用到了better-scroll 来实现区域的滚动。

要是想的功能是，内容区域超出的那部分可以横向滚动，而其他没有超出的则不滚动。

这时候我们需要使用到better-scroll的eventPassthrough

在已经引用了better-scroll，

html代码如下

第一个红色箭头就是使用滚动的区域，下面第二个红色箭头代表的是我们需要横向滚动的内容区域

//js部分
 mounted() {
        this.$nextTick(() => {
            let cliW = this.$refs.mailDetailBox.clientWidth;//需要获取当前屏幕的宽度，这样可以让我们没有超出内容部分的在横向滚动时不会滚动
            this.$refs.mailDetailBox.style.width = cliW + 'px'
            this.scroll = new Bscroll(this.$refs.mailDetailBox, {
                click: true,
                eventPassthrough: 'horizontal'//这是代表的横向滚动
            });
       })
}

//css部分
.mailDetailBox{
    position: absolute;
    left:0;
    right:0;
    top:0.52rem;
    bottom:0.56rem;
    overflow: hidden;
   overflow-x: scroll;
 
}
.mailDetailMsg{//横向滚动区域要添加 overflow-x: scroll
    padding:0.1rem 0.14rem;
    font-size:0.153rem;
    line-height: 1.2;
    overflow-x: scroll
}