父容器不滚动子容器滚动_一个简单的滚动条，可以从正在滚动的容器中分离出来

最新推荐文章于 2024-03-06 15:10:31 发布

cuk5239

最新推荐文章于 2024-03-06 15:10:31 发布

阅读量758

点赞数

文章标签： vue python java js html ViewUI

原文链接：https://vuejsexamples.com/a-simple-scrollbar-that-can-be-detached-from-the-container-it-is-scrolling/

版权

父容器不滚动子容器滚动

Vue分离式滚动条 (Vue Detached Scrollbar)

This is a simple scrollbar that you can detach from the element that you want to scroll in. It comes with a minimal HTML structure.

这是一个简单的滚动条，您可以将其与要滚动的元素分离。它带有最小HTML结构。

现场演示 (Live Demo)

https://ozangulle.github.io/vue-detached-scrollbar/

安装 (Installation)

Simply type

只需输入

npm install --save vue-detached-scrollbar

You'll need Vue.js to run it.

您将需要Vue.js来运行它。

The components, Gallery and ScrollBar communicate with each other via scrollBus. You'll need to import and register it as data.

组件Gallery和ScrollBar通过scrollBus相互通信。您需要导入并将其注册为数据。

import {scrollBus} from 'vue-detached-scrollbar'

const app = new Vue({
  data: {
    scrollBus,
  },
}

Inside the components where you want to use Gallery and Scrollbar, you simply register them as components

在要使用Gallery和Scrollbar的组件内部，只需将它们注册为组件

import {ScrollBar} from 'vue-detached-scrollbar';

export default {
    components: {
        ScrollBar,
    },
}

You can customize the scrollbar using the css classes .scrollbar, .scrollbar-slider, and .scrollbar-wrapper. .scrollbar refers to the bar itself whereas .scrollbar-slider is the slider in it.

您可以使用CSS类.scrollbar，.scrollbar-slider和.scrollbar-wrapper自定义滚动条。 .scrollbar是指条本身，而.scrollbar-slider是其中的滑块。

import {Gallery} from 'vue-detached-scrollbar';

export default {
    components: {
        Gallery,
    },
}

You can put whatever content you want to use between the tags . For example:

您可以在标签之间放置想要使用的任何内容。例如：

<gallery>
    <div id="gallery" class="gallery">
        <div class="gallery-item" v-for="image in imageGallery">
            <img :src="image.src">
        </div>
    </div>
</gallery>

It's important to keep the id 'gallery'. The package uses the id to select it.

保持身份证“画廊”很重要。程序包使用ID进行选择。

Due to the nature of the mouse event listener, you should put a οnmοuseup="document.onmousemove = null" on the main body of the document.

由于鼠标事件侦听器的性质，您应该在文档主体上放置onmouseup =“ document.onmousemove = null”。