el-scrollbar使用以及滚动到指定的位置

xiao9469 · 发表于 2022-6-29 16:54:43

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

浏览器默认的滚动条不太美观而且在ie下不能调整样式，在element-ui中有个隐藏的组件，在官网上是没有对应的api的，那就是<el-scrollbar>，这个组件的滚动条比原生的还是好看些的

props: {
  native: Boolean,
  wrapStyle: {}, // 外层盒子的样式
  wrapClass: {}, // 外层盒子的class
  viewClass: {}, // 内层盒子的class
  viewStyle: {}, // 内层盒子的样式
  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
  tag: {
type: String,
default: 'div'
  }
}

实践定位 : VUE3       在DISCUZ中

this.$refs.map_main.wrap$.scrollTop = this.map_y;  //this.map_y=坐标值
this.$refs.map_main.wrap$.scrollLeft = this.map_x;
DZ写法
this.{$_TRC[DL]}refs.map_main.wrap{$_TRC[DL]}.scrollTop = this.map_y;
this.{$_TRC[DL]}refs.map_main.wrap{$_TRC[DL]}.scrollLeft = this.map_x;

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 23:52:54

在Discuz中，如果你想使用`el-scrollbar`组件来实现自定义滚动条，并且需要滚动到指定的位置，可以参考以下步骤和代码示例。

### 1. 引入`el-scrollbar`组件
首先，确保你已经引入了`element-ui`库，并且在你的Vue组件中注册了`el-scrollbar`组件。

import { ElScrollbar } from 'element-ui';
export default {
components: {
ElScrollbar
},
// 其他代码...
}

复制代码

### 2. 使用`el-scrollbar`组件
在你的模板中使用`el-scrollbar`组件，并为其设置`ref`以便在代码中引用。

<template>
<el-scrollbar ref="map_main" :wrap-style="wrapStyle" :wrap-class="wrapClass" :view-class="viewClass" :view-style="viewStyle" :noresize="noresize" :tag="tag">
</el-scrollbar>
</template>

复制代码

### 3. 设置滚动位置
在你的Vue组件中，使用`this.$refs`来访问`el-scrollbar`组件的`wrap$`属性，并设置`scrollTop`和`scrollLeft`来滚动到指定位置。

export default {
data() {
return {
map_y: 0, // 垂直滚动位置
map_x: 0, // 水平滚动位置
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewClass: {}, // 内层盒子的class
viewStyle: {}, // 内层盒子的样式
noresize: false, // 是否优化性能
tag: 'div' // 外层标签
};
},
methods: {
scrollToPosition() {
this.$refs.map_main.wrap$.scrollTop = this.map_y;
this.$refs.map_main.wrap$.scrollLeft = this.map_x;
}
},
// 其他代码...
}

复制代码

### 4. 在Discuz中的写法
在Discuz中，由于模板引擎的语法限制，你可能需要使用`{$_TRC}`来代替`$`符号。因此，代码可以写成如下形式：

this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollTop = this.map_y;
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollLeft = this.map_x;

复制代码

### 5. 调用方法
你可以在需要的时候调用`scrollToPosition`方法来滚动到指定位置。

this.scrollToPosition();

复制代码

### 6. 注意事项
- 确保`el-scrollbar`组件的`wrap$`属性是可用的，并且`scrollTop`和`scrollLeft`属性能够正确设置。
- 如果`el-scrollbar`组件的容器尺寸不会发生变化，设置`noresize`为`true`可以优化性能。

通过以上步骤，你可以在Discuz中使用`el-scrollbar`组件来实现自定义滚动条，并且能够滚动到指定的位置。如果你有更多问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-19 21:56:23

在Discuz中，如果你想使用`el-scrollbar`组件来实现自定义滚动条，并且需要滚动到指定的位置，可以参考以下步骤和代码示例。

### 1. 引入`el-scrollbar`组件
首先，确保你已经引入了`element-ui`库，并且在你的Vue组件中注册了`el-scrollbar`组件。

import { ElScrollbar } from 'element-ui';
export default {
components: {
ElScrollbar
},
// 其他代码...
}

复制代码

### 2. 使用`el-scrollbar`组件
在你的模板中使用`el-scrollbar`组件，并为其设置`ref`以便在代码中引用。

<template>
<el-scrollbar ref="map_main" :wrap-style="wrapStyle" :wrap-class="wrapClass" :view-style="viewStyle">
</el-scrollbar>
</template>

复制代码

### 3. 设置滚动位置
在Vue3中，你可以通过`this.$refs`来访问`el-scrollbar`组件的实例，并通过`wrap$`属性来设置滚动位置。

export default {
data() {
return {
map_y: 0,
map_x: 0,
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewStyle: {} // 内层盒子的样式
};
},
methods: {
scrollToPosition() {
this.$refs.map_main.wrap$.scrollTop = this.map_y;
this.$refs.map_main.wrap$.scrollLeft = this.map_x;
}
}
};

复制代码

### 4. 在Discuz中的写法
在Discuz中，由于模板引擎的语法限制，你可能需要使用`{$_TRC}`来代替`$`符号。因此，代码可以写成：

this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollTop = this.map_y;
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollLeft = this.map_x;

复制代码

### 5. 注意事项
- `el-scrollbar`是`element-ui`中的一个隐藏组件，官方文档中没有详细的API说明，因此在使用时需要参考源码或社区中的示例。
- 如果你需要兼容IE浏览器，确保`element-ui`的版本支持IE，并且测试滚动条的行为是否符合预期。
- 如果`container`的尺寸不会发生变化，可以设置`noresize`属性为`true`以优化性能。

### 6. 示例代码
以下是一个完整的示例代码：

<template>
<el-scrollbar ref="map_main" :wrap-style="wrapStyle" :wrap-class="wrapClass" :view-style="viewStyle">
<div style="width: 2000px; height: 2000px;">
</div>
</el-scrollbar>
</template>
<script>
import { ElScrollbar } from 'element-ui';
export default {
components: {
ElScrollbar
},
data() {
return {
map_y: 500,
map_x: 500,
wrapStyle: { height: '500px' },
wrapClass: 'custom-wrap',
viewStyle: { padding: '20px' }
};
},
mounted() {
this.scrollToPosition();
},
methods: {
scrollToPosition() {
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollTop = this.map_y;
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollLeft = this.map_x;
}
}
};
</script>
<style>
.custom-wrap {
border: 1px solid #ccc;
}
</style>

复制代码

通过以上步骤，你可以在Discuz中使用`el-scrollbar`组件，并实现滚动到指定位置的功能。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-19 21:59:22

在Discuz中，如果你想使用`el-scrollbar`组件来实现自定义滚动条，并且需要滚动到指定的位置，可以参考以下步骤和代码示例。

### 1. 引入`el-scrollbar`组件
首先，确保你已经引入了`element-ui`库，并且在你的Vue组件中使用了`el-scrollbar`组件。

<template>
<el-scrollbar ref="map_main" :wrap-style="wrapStyle" :wrap-class="wrapClass" :view-class="viewClass" :view-style="viewStyle" :noresize="noresize" :tag="tag">
</el-scrollbar>
</template>
<script>
export default {
data() {
return {
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewClass: {}, // 内层盒子的class
viewStyle: {}, // 内层盒子的样式
noresize: false, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
tag: 'div', // 默认标签
map_y: 0, // 垂直滚动位置
map_x: 0 // 水平滚动位置
};
},
methods: {
scrollToPosition() {
// 使用 $refs 获取 el-scrollbar 实例并滚动到指定位置
this.$refs.map_main.wrap$.scrollTop = this.map_y;
this.$refs.map_main.wrap$.scrollLeft = this.map_x;
}
}
};
</script>

复制代码

### 2. 在Discuz中的写法
在Discuz中，由于模板引擎的语法限制，`$refs`的写法需要稍作调整。你可以使用`{$_TRC}`来代替`$`符号。

<template>
<el-scrollbar ref="map_main" :wrap-style="wrapStyle" :wrap-class="wrapClass" :view-class="viewClass" :view-style="viewStyle" :noresize="noresize" :tag="tag">
</el-scrollbar>
</template>
<script>
export default {
data() {
return {
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewClass: {}, // 内层盒子的class
viewStyle: {}, // 内层盒子的样式
noresize: false, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
tag: 'div', // 默认标签
map_y: 0, // 垂直滚动位置
map_x: 0 // 水平滚动位置
};
},
methods: {
scrollToPosition() {
// 使用 $refs 获取 el-scrollbar 实例并滚动到指定位置
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollTop = this.map_y;
this.{$_TRC}refs.map_main.wrap{$_TRC}.scrollLeft = this.map_x;
}
}
};
</script>

复制代码

### 3. 调用滚动方法
你可以在需要的时候调用`scrollToPosition`方法来滚动到指定的位置。

this.scrollToPosition();

复制代码

### 4. 注意事项
- `el-scrollbar`是`element-ui`的一个隐藏组件，官方文档中没有详细的API说明，因此在使用时需要参考源码或社区资源。
- 在Discuz中，模板引擎的语法可能会有所不同，确保你使用的语法与Discuz的模板引擎兼容。
- 如果你在Discuz中遇到问题，可以参考DZ插件网（https://www.dz-x.net/）上的相关资源或寻求帮助。

通过以上步骤，你应该能够在Discuz中使用`el-scrollbar`组件并实现滚动到指定位置的功能。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。