div浮动 不随滚动条滚动_方便的Vue.js浮动滚动条组件

div浮动 不随滚动条滚动

方便滚动 (vue-handy-scroll)

Handy floating scrollbar component for Vue.js v2.6.0+.

适用于Vue.js v2.6.0 +的便捷浮动滚动条组件。

vue-handy-scroll is a component that solves the problem of scrolling lengthy content horizontally when that content doesn’t fit into the viewport. It creates a scrollbar which is attached at the bottom of the scrollable container’s visible area and which doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.

vue-handy-scroll是一个组件，用于解决在内容不适合视口时水平滚动冗长内容的问题。 它创建了一个滚动条，该滚动条附加在可滚动容器的可见区域的底部，并且在滚动页面时不会消失，从而使容器的水平滚动更加方便。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

vue-handy-scroll is available on npm, so you may add it to your project as usual:

vue-handy-scroll在npm上可用，因此您可以像往常一样将其添加到项目中：

npm install vue-handy-scroll

After that you may import the component in your app:

之后，您可以在应用程序中导入组件：

import HandyScroll from "vue-handy-scroll";

If you don’t use module bundlers but instead prefer using the component directly in a browser, you may add the component on your page through some CDN such as jsDelivr or unpkg. E.g.:

如果您不使用模块捆绑器，而是希望直接在浏览器中使用组件，则可以通过诸如jsDelivr或unpkg之类的 CDN在页面上添加组件。 例如：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-handy-scroll/dist/handy-scroll.umd.min.js"></script>

or

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-handy-scroll/dist/handy-scroll.umd.min.js"></script>

用法 (Usage)

在模板中添加组件 (Adding the component in templates)

Add the component in your templates as follows:

将该组件添加到模板中，如下所示：

<HandyScroll>
  <!-- Place horizontally wide contents here -->
</HandyScroll>

or (in DOM templates):

或(在DOM模板中)：

<handy-scroll>
  <!-- Place horizontally wide contents here -->
</handy-scroll>

更新滚动条 (Updating scrollbar)

If the layout of your web page may dynamically change, and these changes affect scrollable containers, then you need a way to update the scrollbar every time the container’s sizes change. This can be done by emitting the event update through the event bus provided by the component.

如果网页的布局可能会动态更改，并且这些更改会影响可滚动容器，那么您需要一种在容器大小每次更改时更新滚动条的方法。 这可以通过通过组件提供的事件总线发出事件update来完成。

import {EventBus} from "vue-handy-scroll";
// ... some actions which change the total scroll width of the container ...
EventBus.$emit("update", {sourceElement: this.$el});

As demonstrated by the example above, when emitting the event, you may pass a reference to the source element. The component uses this reference to detect which scrollable container is actually affected, and updates only the one that contains the provided source element inside it. If you emit the update event without providing the source element, all instances of the component will be updated.

如上面的示例所示，发出事件时，可以将引用传递给source元素。 组件使用此引用来检测实际受影响的可滚动容器，并仅更新其中包含所提供源元素的容器。 如果在不提供source元素的情况下发出update事件，则将更新组件的所有实例。

自定义视口元素 (Custom viewport element)

Sometimes, you may want to place the floating scrollbar in a container living in a positioned box (e.g. in a modal popup with position: fixed). To do so, the component needs to be switched to a special functioning mode by specifying the prop custom-viewport:

有时，您可能需要将浮动滚动条放置在位于定位框中的容器中(例如，在position: fixed的模式弹出窗口中)。 为此，需要通过指定prop custom-viewport将组件切换到特殊的功能模式：

<HandyScroll :custom-viewport="true">
  <!-- Place horizontally wide contents here -->
</HandyScroll>

The resulting rendered HTML will have the following structure:

生成的呈现HTML将具有以下结构：

<div class="handy-scroll-viewport">
  <!-- slot “viewport-before” -->
  <div class="handy-scroll-body">
    <!-- slot “body-before” -->
    <div class="handy-scroll-area">
      <!-- Horizontally wide contents goes here (slot “default”) -->
    </div>
    <!-- slot “body-after” -->
  </div>
  <!-- slot “viewport-after” -->
</div>

Notice the placement of named slots in this structure (denoted by comments for clarity). You may use them to distribute content as needed. E.g.:

注意命名槽在该结构中的位置(为清楚起见，用注释表示)。 您可以根据需要使用它们来分发内容。 例如：

<HandyScroll :custom-viewport="true">
  <template #vieport-before>
    whatever meaningful to be placed between
    “viewport’s” and “body’s” opening tags
  </template>
  <!-- Place horizontally wide contents here -->
</HandyScroll>

The .handy-scroll-viewport element is a positioned block (with any type of positioning except static) which serves for correct positioning of the scrollbar widget. Note that this element itself should not be scrollable. The .handy-scroll-body element is a vertically scrollable block (with overflow: auto) which encloses the target container the floating scrollbar is mounted in.

.handy-scroll-viewport元素是一个定位块(除static之外，具有任何类型的定位)，用于正确定位滚动条小部件。 请注意，这个元素本身不应该是滚动的。 .handy-scroll-body元素是一个可垂直滚动的块(带有overflow: auto )，该块围住了浮动滚动条安装在其中的目标容器。

The component provides some basic styles for elements with classes .handy-scroll-viewport and .handy-scroll-body. Feel free to adjust their styles in your stylesheets as needed (it that case you’ll probably need deep selectors ::v-deep).

该组件为类.handy-scroll-viewport和.handy-scroll-body提供了一些基本样式。 可以根据需要在样式表中随意调整其样式(在这种情况下，您可能需要深度选择器 ::v-deep )。

“不打扰”模式 (“Unobtrusive” mode)

You can make the floating scrollbar more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just set the prop unobtrusive to true:

您可以使浮动滚动条更加“不显眼”，以便仅当鼠标指针悬停在可滚动容器上时才会显示。 要做到这一点刚才设置的道具unobtrusive ，以true ：

<HandyScroll :unobtrusive="true">
  <!-- Place horizontally wide contents here -->
</HandyScroll>

翻译自: https://vuejsexamples.com/handy-floating-scrollbar-component-for-vue-js/

div浮动 不随滚动条滚动