Vue, Element-UI 滚动条: el-scrollbar 基本使用

Element UI的el-scrollbar自动滚动到底部避坑指南:解决聊天消息不滚动的问题 本文深入解析了Element UI中el-scrollbar组件实现自动滚动到底部的核心原理与常见问题。针对聊天消息不滚动等场景,提供了从正确获取滚动容器、利用$nextTick等待DOM更新,到处理流式输出、弹窗等复杂情况的完整解决方案,并分享了可复用的Composition API封装与性能优化实践。 阅读详情

背景

参与修改前端项目(Vue, Element-UI),添加用户体验性需求,只涉及页面UI,未涉及数据交互

需求分析

为一个窗口添加滑动栏

解决方案

使用el-scrollbar
框架

 <div class="box">
      <el-scrollbar style="height: 100%">
        <!--滑动栏里的内容 -->
      </el-scrollbar>
    </div>

注意
1,默认xy都有滑动栏,添加以下代码可以隐藏x轴的滑动栏

.el-scrollbar__wrap {
  overflow-x: hidden;
}

2,style中

1). 必须去掉scoped,否则overflow-x: hidden失效
2.)外包一个div

  • 来减少对其他页面会有冲突(此时缺少scoped)
  • 可以通过控制div来控制滑动栏区域的大小

案例

<template>
  <div>
    <h2>el-scrollbar滚动条使用</h2>
    <div class="box">
      <el-scrollbar style="height: 100%">
        <!--滑动栏里的内容 -->
        <h3>一致性 Consistency</h3>
        <p>
          与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
        </p>
        <p>
          在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
        </p>
        <h3>反馈 Feedback</h3>
        <p>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</p>
        <p>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</p>

        <h3>效率 Efficiency</h3>
        <p>简化流程:设计简洁直观的操作流程;</p>
        <p>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</p>
        <p>
          帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
        </p>

        <h3>可控 Controllability</h3>
        <p>
          用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
        </p>
        <p>
          结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
        </p>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
h2{
    text-align: center;
}
/* 1,必须去掉scoped,否则overflow-x: hidden失效 */
.box {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: salmon;
}

/* 2,外包一个div,来减少对其他页面会有冲突(此时缺少scoped) */
.box .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

效果图
在这里插入图片描述

Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案 vueelementui组件库的侧边栏出现滚动条,ElementUI侧边导航栏出现滚动条如何去除,element-ui侧边导航栏有滚动条,Vueelementui中侧边栏滚动条隐藏,使用vue和element导航菜单去除的滚动条,element-ui侧边导航栏有滚动条,前端-如何关闭elementUI左侧aside的滚动条,使用vue和element导航菜单去除的滚动条,使用vue和element导航菜单去除的滚动条,Vueelementui中侧边栏滚动条隐藏,Vue后台项目中如何去除左侧菜 阅读详情

相关推荐

从桨叶设计到电机匹配:手把手教你调出无人机最佳动力组合

本文系统介绍了无人机动力系统的核心匹配原则,重点解析了如何通过测试与数据分析,优化螺旋桨与电机的组合,从而显著提升系统力效与续航。文章提供了从参数解读、实战测试到深度调优的完整指南,帮助开发者解决电机过热、推力不足等常见问题,实现无人机性能最大化。

weixin_29305313的博客 241

Element-UI中el-scrollbar的max-height实战:如何让滚动条只在内容溢出时出现

本文深入探讨了在Element-UI的el-scrollbar组件中,如何利用max-height属性实现滚动条的智能显隐。通过实战代码示例,详细讲解了如何让滚动区域在内容未溢出时自适应高度,仅在内容超出设定阈值时才出现滚动条,从而打造更流畅、专业的自适应高度界面体验。

s3t4u的博客 497

双轴按键摇杆模块原理与嵌入式驱动实战

双轴按键摇杆是一种融合模拟量(X/Y轴)与数字量(Z轴按键)的复合型人机交互传感器,其本质基于电位器分压原理与机械开关通断特性。通过ADC采集连续电压信号并结合数字IO检测按键状态,可实现高鲁棒性的二维运动感知与触发控制。该方案技术门槛低、成本可控、兼容性强,广泛应用于智能小车、DIY游戏手柄、工业HMI及教育开发板等嵌入式场景。文中深入解析电位器线性度、KEY引脚开漏特性、ADC参考电压稳定性及软件消抖状态机等关键工程要素,为基于Arduino、STM32或ESP32平台的快速集成提供可复用的技术路径。

weixin_30995917的博客 82

使用粘性定位实现列固定可左右滑动的table布局

<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <

weixin_43827779的博客 1408

设计一个订单管理系统(OMS)系统100问?

一个完善的订单管理系统不仅仅是简单地记录和处理订单信息,更需要考虑到订单的全生命周期管理,包括订单的创建、支付、配送、售后等环节。这100个问题围绕订单管理系统(OMS)的各个方面展开,涵盖了系统的功能、架构、安全性、异常处理、订单处理流程、支付、库存管理、客户管理、报表与分析等多个方面。通过这些问题,可以全面考虑订单管理系统在设计与实现过程中需要考虑的各种因素,从而确保系统能够满足业务需求、具有良好的性能和稳定性,同时易于扩展、维护和管理。

nbsaas-boot基于Request-Response的企业级快速开发框架 1384

手把手教你配置MCAL中的CAN模块:从基础参数到实战避坑指南

本文提供了一份详尽的MCAL CAN模块配置指南,涵盖从基础参数设置到实战避坑的全过程。文章深入解析了CAN控制器核心参数、硬件对象配置、数据流处理及常见问题排查,并结合源码分析,帮助嵌入式开发者构建稳定高效的CAN通信链路,是汽车电子领域通信开发的实用参考。

weixin_29165465的博客 336

组件el-scrollbar的使用

对于elementui里面的scrollbar组件,一直没有一个清晰的使用方法,似乎每次使用需要的代码都不同,需要加各种乱七八糟的样式加穿透样式,今天自己测试了下,似乎并没有想象的复杂。 1.最简单的使用 <template> <div> <el-scrollbar> <div class="box"> <ul> <li v-for="item in 100">{{ item

qq_44473483的博客 2万+

10年上位机开发踩过的20个坑:C#通信/线程/UI适配避坑指南

通信层:所有通信操作异步化、异常全覆盖,加断线重连+心跳检测,多设备隔离资源;线程层:UI更新必做跨线程判断,共享数据加锁,线程池限流,异常不静默;UI层:适配高分屏/DPI,用布局容器替代固定坐标,多屏场景绑定主屏幕。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 904

element-ui的滚动条组件el-scrollbar如何使用

项目原来用html做的,有个scrollbar滚动条,是js插件,现在用vue框架了,想用这个滚动条还有点复杂,突然想到element ui官方文档的侧栏不就是的吗, 怎么样,看起来是不是觉得挺优雅。 但是经过仔细找,发现Element 官方没有说有这么一个Scrollbar组件的, 文档没有说,但当我查看官网源代码,发现他有使用el-scrollbar这样一个组件,经过多方查找,虽然官网没有写使用文档,但是我们还是可以用的。 基础用法: <div class="lsm-container".

格の调 7732

yolov26改进 | 检测头篇 | 利用渐近特征金字塔网络AFPN改进yolov26检测头融合P2网络结构(让小目标无所遁形,全网独家首发)

本文介绍一种基于AFPN渐近特征金字塔网络改进的YOLOv26四检测头Detect_FPN。AFPN通过逐级融合底层细节、中层结构与高层语义特征,缩小不同尺度特征之间的语义差距,减少直接融合带来的信息冲突,使检测头获得更稳定、更充分的多尺度表达。本文进一步增加高分辨率小目标检测分支,强化对微小目标、密集目标和复杂背景目标的感知能力,适合工业缺陷、遥感及无人机等场景。文中将展示基础模型与改进模型的训练对比结果,并提供完整代码、配置文件、模块注册方法及Codex修改思路,方便直接复现和二次创新。

Snu77的博客 371

华为od 面试八股文_C语言_02_含答案

华为od 面试八股文_C语言_02_含答案

MISAYAONE的博客 2230

vue2滚动条el-scrollbar使用,滚动条移动和重置位置

本文介绍了Element UI组件中滚动条的实现与封装方法。首先展示了使用el-scrollbar和el-steps组件创建垂直步骤条的代码结构,通过设置wrap-style属性控制横向溢出隐藏。其次封装了两个滚动条操作方法:1) scrollToActiveStep实现逐步滚动功能,计算目标位置和最大可滚动距离;2) scrollToTop将滚动条重置到顶部。方法中通过$refs获取滚动容器实例,利用scrollTop属性控制滚动位置,实现了平滑滚动和归位功能。

weixin_68397463的博客 2980

手把手教你学AUTOSAR(13.1)--基于 AUTOSAR 的开发实战实例(一)

通过上述几个基于 AUTOSAR 的开发实战实例,你可以全面了解如何从需求分析、系统设计、软件开发、集成测试到部署和验证等多个环节进行 AUTOSAR 系统的开发。这些实例不仅涵盖了不同的应用场景,还提供了具体的代码实现和技术细节,帮助你更好地应用 AUTOSAR 标准。

MHD0815的博客 1195

Vue(十二):el-scrollbar滚动监听

展示 源码 <template> <div style="padding: 50px;"> <el-scrollbar ref="scrollbar" style="height: 500px;background-color: #fafafa;"> <p v-for="item in 200" :key="item" class="scrollbar-demo-item">{{ item }}</p&g

You瞧谁不起 - 道不尽世间的沧桑,诉不完人生的悲凉 3204

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

零基础玩转el-scrollbar:5分钟创建你的第一个自定义滚动条

组件默认就支持hover样式,你只需要在CSS中定义好对应的样式即可。今天我就来分享一个超级简单的入门教程,5分钟就能搞定你的第一个自定义滚动条。我自己试了一下,整个过程非常顺畅,从代码编写到效果预览,再到一键部署,几乎没有任何障碍,特别适合像我这样的初学者。这个平台内置了代码编辑器和实时预览功能,还能一键部署你的项目,非常适合新手学习和实践。标签内部放入一个固定高度的div,内容超出这个高度时,就会自动出现滚动条。这个组件不需要额外安装,因为它已经包含在Element UI的核心组件中。

SilvermistFalcon19的博客 690

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Element-ui之ElScrollBar组件滚动条的使用方法

在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid ...

2万+

Vue&Element隐藏组件el-scrollbar滚动条

注意:<el-scrollbar> </el-scrollbar>这个组件的外层和内层一定要有一个div,本文定义了div 'father’和div “child” , div 'father’设不设置高度都可,但没有这个div的话底部和出现一条横向的滚动条如下图;div “child” 一定要设置高度不然的话滚动条是出不来的,最后div "child"里面才是我们要放的...

weianl的博客 5606

Vue的自定义滚动,我用el-scrollbar

正文开始…… 为什么要用el-scrollbar? 最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用overflow: scroll;啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗。 大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的。所以这些年行走江湖我满怀愧疚,让大家见丑了。 为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用...

JNPF快速开发平台的博客 409

element-ui滚动条el-scrollbar置底

element-ui滚动条el-scrollbar置底 在需要滚动的地方加上 &lt;el-scrollbar ref="myScrollbar" style="height: 600px"&gt;&lt;/el-scrollbar&gt; 方法 scrollDown() { this.$refs['myScrollbar'].wrap.scrollTop = this.$r...

a2398936046的博客 1万+

Vue的自定义滚动el-scrollbar

为什么要用el-scrollbar? 最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用overflow: scroll;啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗。 大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的。所以这些年行走江湖我满怀愧疚,让大家见丑了。 为什么要用el-...

qq2276031的博客 1416

Element-ui之ElScrollBar组件滚动条的使用

在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致,于是产生了灵感:能否使用element使用的滚动条组件呢?带着这个问题我们看这篇文章。

前端江湖 8万+

vue中改变滚动条的样式

vue中改变滚动条的样式 element-ui的滚动条组件 el-scrollbar 1.比如说下面的这个样式 html部分: <div style="margin:30px;"> <ul style="width:500px;height:50px;overflow:auto;white-space:nowrap"> <li v-for="(item,index) in list" :key="index" style="width:20px;height:

口袋的天空的博客 520

el-scrollbar+el-tree超出宽度出现横向滚动条

CSS部分,给el-scrollbar__view设置display: inline-block是重中之重!再结合overflow-x:auto,横向滚动条自然而然就出来啦~1、HTML部分,在el-scrollbar元素上添加 view-style="height:100%;

hunantai的博客 1068

el图片滚动_Vue的el-scrollbar实现自定义滚动

为什么要用el-scrollbar?最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用 overflow: scroll; 啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗。大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的。所以这些年行走江湖我满怀愧疚,让大家见丑了。为什么要用el-scrollbar,...

weixin_39999025的博客 495

基于element-ui el-scrollbar 自定义滚动指令

不怎么擅长写文档,先上效果图 github源码地址 背景: 在使用element-ui 开发项目中,有一个隐藏的组件 el-scrollbar 可以用来美化滚动条,往往有这种需求,需要滚动到一定的位置,并且可以加一些过渡的动画,为此写了一个组件和大家分享一下。 思路: vue 自定义指令 scrollHeight/clientHeight/scrollTop 等dom上的属性 用于偏移量的疾患 window.requestAnimateframe 动画 不平滑 代码: import ..

漫无目的猿猿的博客 1462

手动通过css来美化界面中的滚动条样式

默认浏览器的滚动条样式很丑, 我们在vue项目中,如果使用了element-ui的话,是可以借用他的滚动条的。 方法一:手动设置滚动条样式, 只能解决chrome浏览器等上面的样式。还可以。不要要求太多。 <div class="wrap"> <p>我是很长的内容</p> </div> 设置样式: .wrap::-webkit-scrollbar { /* 滚动条宽度和高度 */ width: 8px; height: 8px;

一键写代码的博客 1965
上一篇: Linux安装C环境并运行helloworld
下一篇: el-badge上角标数据+定时器刷新数据
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值