前言这里是通过vue的指令封装好的 直接创建一个js文件复制进去，引入一下就搞定了，非常简单html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这个拖拽等功能。 就在这里又写了一个版本的。 是html页面引入了vue的语法开发的 这种情况也是一些项目常用的情况。 想要这种版本的可以跳转另一个帖子查看点击这里跳转效果图大体就是这样，鼠标放到上面的时候可
转载
2024-04-09 07:52:12
220阅读
实验题目将8255单元与键盘及数码管显示单元连接，编写实验程序，扫描键盘输入，并将扫描结果送数码管显示。键盘采用4X4键盘,每个数码管显示值可为0-F共16个数。实验具体内容如下:将键盘进行编号，记作0~F,当按下其中一一个按键时，将该按键对应的编号在一一个数码管上显示出来，当再按下一个按键时，便将这个按键的编号在下-一个数码管上显示出来,数码管上可以显示最近4次按下的按键编号。电路
转载
2024-06-12 16:26:50
158阅读
为什么要用el-scrollbar？最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗。 大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。所以这些年行走江湖我满怀愧疚，让大家见丑了。
转载
2024-04-09 15:00:44
140阅读
问题讲解：在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到官方代码中在这边没有让这个可展开tabl
转载
2024-03-07 14:03:10
244阅读
本文将要为您介绍的是Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条,具体操作方法:本博主在一次个人移动端项目中，遇到这么一个需求：希望自己的项目中，头部导航条的效果可以像今日头条那样，横向滚动!对于这样的效果，在各大移动端项目中几乎是随处可见，为什么呢？我们都知道，对于移动端也就是手机上，我们页面的宽度并不像PC端那样大，可以显示很长的导航项，但对于我们移动端来说
前言如果项目使用了elementUI，可以看一下。如果没有使用，可以看我的另一篇文章，用div写的滚动表格项目看板滚动数据显示。参考文章：Element动态生成表格以及表格内容无缝滚动感谢这篇文章的思路，开阔了思路。指令版需求（功能）数据按条滚动支持自定义列内容设置表格背景色和字体颜色本来还想加个鼠标移入停止，移出重新滚动的功能，但是指令里没法监听。这个功能就没法实现效果图实现代码let valu
转载
2024-02-19 14:18:57
2548阅读
element-ui的官网页面使用的这个滚动条，但是在官网文档中没有介绍这个组件。在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。在项目中使用这个组件时由于各层的样式没有设置好，可能会显示出原生的滚动条，特此记录。搭建脚手架项目，安装element-ui插件按需引入需要的组件import Vue from 'vue'
import {
Scrollbar
}
转载
2024-03-20 12:20:30
331阅读
element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。1、效果1、滑到底部时 2、未滑到底部时 效果还是很不错的，十分丝滑。 看了效果后直接开干吧。2、操作流程1、首先去除掉原有element
转载
2024-03-12 14:36:15
477阅读
1、滚动条的变相隐藏思路：1. 把body的横向，纵向的超出部分隐藏，宽设置100%；高设置100%。就没有body的滚动条了，2. 然后把最外层的div的宽设置的比body的宽宽一点，把div的滚动条挤出去，并把div的横向超出部分隐藏掉，就可以实现没有滚动条也可以滚动的效果 1 <html>
2 <style>
3 *{
4
转载
2023-10-20 18:59:16
891阅读
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其 实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。 <!DOCTYPE
转载
2024-08-28 15:27:33
81阅读
一：以隐藏水平滚动条为例。1.给父元素加一个样式(overflow:hidden)，隐藏滚动条，但是这样做之后，滚动效果也会消失。2.障眼法，给父元素添加样式(overflow:hidden),而子元素添加(overflow-x:hidden;overflow-y:scroll;)，然后 把子元素的高设置为父元素的高加上17px，17px是滚动条的高度，这样，父元素隐藏，子元素没有隐藏，实现的效果
转载
2023-08-23 18:18:24
176阅读
elementUI 中有一个隐藏组件<el-scrollbar>，用来修改滚动条的样式；1.组件的名称是 <el-scrollbar></el-scrollbar>2.修改默认样式 ，最好在前面加上：class名/id名，用来区别.page-component__scroll .el-scrollbar__wrap {
原创
2022-04-11 14:21:13
2537阅读
只需要包裹在需要滚动的容器外层，如下： <el-scrollbar class="customScrollbar"> <!-- 需要滚动的容器 --> </el-scrollbar> 样式(必须设置) .customScrollbar{ height:100% } .customScrollbar ...
转载
2021-08-27 10:46:00
412阅读
2评论
vue中关于滚动条的那点事不知道你有没有遇到过这种情况，有时当页面切换时，滚动条不在页面的顶端。最近半路加入一个项目，就遇到这种情况。(若只是为了解决此问题，可直接翻到最下方)下面谈谈解决此问题的过程：什么情况下会出现滚动条的缓存？之前想要滚动条在页面跳转时被缓存，需要自己设定keep-alive，并且需要在路由中设定meta属性export default new Router({
routes
css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻。 ::-webkit-scrollbar {/*隐藏滚轮*/ display: none; } 但是仅限于支持css3的浏览器。如果是其他浏览器的话，可以麻烦点，先overflow:hidden; 然后再用写个滚轮向上滚DIV实现滚动效果，又要隐藏滚动条。用overflow-x:hDIV实现滚动效果，但是又要隐藏滚动条。
转载
2024-01-26 09:04:12
346阅读
问题釐清什麽是＂滚动条＂？滚动条指的是下图右侧被红线框起来的部分： 只要网页内容大于视窗，滚动条就会出现。一般来说，只要不是body层次的滚动条，那用overflow: hidden;就能解决滚动条出现的问题，但此时页面也会变得无法捲动。目前网路上已经有诸多可隐藏非body层次的滚动条又可捲动页面的教学，所以本文主要聚焦于如何隐藏浏览器（也就是body层次）的滚动条。解决方法针对不同的浏览器，有
转载
2024-01-28 00:24:35
114阅读
今天老大让我给之前的表格添加表格滚动加载，而且还要固定表头，第一感觉就是先到element-ui的官网例子看看，固定表头主要用到了 height 这个属性，还有最大高度这个属性max-height 主要是设置超过这个高度就会出现滚动条，height 是设置表格的高度，让表格的表头固定在最上面。 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代
转载
2024-02-19 14:19:39
1188阅读
pc端项目中，有时候会在页面内部出现滚动条
原创
2022-08-04 13:29:46
1248阅读
css实现隐藏滚动条并可以滚动内容前言方法一、计算滚动条宽度并隐藏起来方法二、css隐藏滚动条 前言当页面的html结构嵌套的盒子很多的时候，可能会导致一个页面中含有多个垂直滚动条。 这样的话很影响页面的样式，所以我们需要隐藏滚动条的同时还支持滚动，下面就是利用css实现的两种方法。方法一、计算滚动条宽度并隐藏起来原理：外面的盒子和里面的盒子利用子绝父相进行布局，里面的盒子向右移动17个像素，刚
转载
2024-07-10 19:21:11
237阅读
.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px; background: white;
原创
2022-03-02 10:15:13
812阅读
