首页
学习
活动
专区
圈层
工具
发布

electron制作聊天界面(仿制qq)

在制作之前参考了qq和千牛 需要注意的点 qq将滚动条美化了 而且在无操作的情况下是不会显示的 滚动条美化 ::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px...; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius:...{ this.messageScroll = true; }, hideMessageScrolls(){ this.messageScroll = false; }, 这里解释一下为什么有一个...paddingRight 因为我们的滚动条是5px 如果不加 在滚动条显示的时候页面会抖动 简单写法 @mouseenter="messageScroll = true" @mouseleave...$refs.msgBox.scrollHeight; 内容编辑 没有使用表单元素 直接使用的 contenteditable 因为contenteditable 没法用双向数据绑定 不过 可以用数据侦听器

2.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    不同大小的文字底部对齐,为什么不能使用flex-end

    flex容器下,不同大小的文字底部对齐,为什么应该使用 baseline 而不是 flex-end?...背景-从一个兼容性Bug说起看一下最简单的例子:flex-end"> 小字体运行的效果如下:图片可以看到两个字体所在矩形虽然对齐了,但是两个文字的底部并没有对齐...分析原因发现,是因为文字周围有一圈空白的边距,这个边距在字体大小不同的情况下是不一致的,所以矩形区域虽然对齐了,但是文字底部没有对齐。...从 line-height 的角度解决为什么你不应该使用 line-height: 1首先想到的就是把文字周围的边距给彻底去掉,也即设置 line-height: 1,那么为什么说不应该使用这种方式呢?

    2K40

    修复一个因为 scrollbar 占据空间导致的 bug

    就去测试小哥的PC上看, 注意到一个细节, 在我PC上, 滚动条是悬浮的: ? 在他PC上, 滚动条是占空间的: ?...表现: html { overflow-y: overlay; } 兼容性 没有在caniuse上找到这个属性的兼容性, 也有人提这个问题: ? 问题场景以及解决办法 1....外部容器的滚动条 这里的外部容器指的是html, 直接加在最外层: html { overflow-y: scroll; } 手动加上这个特性, 不论什么时候都有滚动宽度占据空间。...缺点:没有滚动的时候也会有个滚动条, 不太美观。 优点:方便, 没有兼容性的问题。 2....内部容器做兼容 .wrapper { overflow-y: scroll; // fallback overflow-y: overlay; } 总结 个人推荐还是用 overlay

    3.8K20

    学前端到了CSS阶段,你一定要掌握这9大防御式开发技能

    ,可以通过设置 overflow-y控制滚动条是否展示。...没有滚动条的时候,内容尽可能占据宽度,有了滚动条,可用宽度减小stable如果 overflow 属性计算值不是 visible,则提前预留好空白区域,这样滚动条出现的时候,整个结构和布局都是稳定的。...没有加scrollbar-gutter时,未出现滚动条和出现滚动条之间的差别加上scrollbar-gutter:stable;后,出现滚动条和没有出现滚动,前后文字显示效果没有差异...,只有内容溢出时才显示*/ overflow-y: auto; /*预留好滚动条位置,必免引起重排*/ scrollbar-gutter: stable; }...为什么是添加n-2个span元素呢?当最后一行只有1个子元素时,他会默认靠左,不用处理当最后一行子元素正好时,我们就不用关心这个问题。

    2.3K00

    CSS vw让overflow:auto页面滚动条出现时不跳动

    应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条;超出,出现滚动条。于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的。...开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示,滚动条出现,占据可用宽度,margin: 0 auto主体元素自然会做偏移——跳动产生。...于是,要么没有滚动条,要么滚动条直接出现。不会出现跳动。 ? 然而,然而,后面的策略只适合一些特殊的定制性很强的页面。...而100%是可用宽度,是不含滚动条的宽度。 于是,calc(100vw - 100%)就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!...左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!

    4.7K20

    数组越界为什么没有出错

    这就是一个典型的数组越界引发的问题,如果大家细心读程序观察结果,就会发现虽然str字符串的内容没有问题,但旁边的整形变量a似乎有点“抢镜”哦,原来是5,可现在竟然输出0!...再看看代码,又没有被赋值,就莫名由5改成了0!真是躺着也中枪啊! 那这里为什么a的值被更改了呢?下面我们为大家详细解释! ?...a确认是5没有问题,由于str数组的地址我们观察到比a要小,所以内存监视这里我们更新为str的地址。 可以顺便观察str和它后面的a两个值, 如下图: ?...可以看到str地址0x0019ff30处还未初始化,而a的地址为0x0019ff3c且初始化为5,没有问题! 执行下一步继续观察: ?

    2.7K100

    iframe关于滚动条的去除和保留(转载)

    iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?...-----始终隐藏滚动条 当设置 scrolling : no 时,全部的滚动条就没有了。...第二个方法:我发现除了 scrolling 可以去掉全部的滚动条外,还有另一个方法,在嵌入的页面里设置 body{overflow:hidden},这样也可以将滚动条去掉,而且这也是当我们只想去掉某一个滚动条所使用的属性...二:去掉右边的滚动条且保留底下的滚动条 如果只想保留底下的滚动条,那么可以在嵌入的页面里设置 body{overflow-x:auto ; overflow-y:hidden;} 三:去掉底下的滚动条且保留右边的滚动条...在嵌入的页面里设置 body{overflow-x:hidden;overflow-y:auto;} 我们已经知道了这两个属性都可以设置滚动条的显示和隐藏,那么当两个同时设置时,会出现哪个效果呢?

    6.6K20

    如何使用 CSS 设置和自定义水平和垂直滚动条

    使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。...overflow-y属性接受两个值之一:scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容,容器始终会有一个滚动条。...另一方面,如果将overflow-y属性的值设置为auto,则浏览器只有在目标容器有超出内容时才会添加滚动条。...将overflow-y属性的值设置为auto后,如果没有内容超出容器的边界,浏览器将隐藏滚动条。恭喜您!您已成功创建了一个垂直滚动条。如果需要的话,可以休息一下。...可滚动的容器在上一节中,我们通过将overflow-y属性的值设置为scroll来添加滚动条。您可以猜到这将是什么。你猜对了。属性名叫overflow-x。

    5.5K00

    为什么Python没有main函数?

    作者 | 豌豆花下猫 来源 | Python猫(ID:python_cat) 众所周知,Python中没有所谓的main函数,但是网上经常有文章提到“ Python的main函数”和“建议编写main函数...在本文中,我们来讨论一下为什么Python没有main函数。 在开始讨论之前,我们先来回答以下两个问题: 所谓的“main函数”究竟是什么意思? 为什么有些编程语言必须编写main函数?...为什么必须强制main函数作为入口? 这些语言都是编译语言,需要将代码编译成可执行的二进制文件。为了让操作系统/引导程序找到程序的开头,需要定义这样一个函数。...除了函数名是“main”之外,这段代码与我们前面介绍的main函数没有半点关系,这个函数既不是必须的,也不能确定程序的执行顺序。即便没有上面这样的main函数,也不会有任何的语法问题。...为什么要写这样的if语句?你压根不应该将这段代码包装成一个函数! 总结 打破惯性思维,编写真实的代码。main函数是某些语言的唯一入口,但不应在Python中使用。

    2.4K20

    html div 隐藏滚动条样式,div滚动条样式隐藏与显示

    DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢?...要设置CSS滚动条样式,需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。...常规overflow怎么设置 overflow-y:scroll 总是显示纵向滚动条 overflow-y:visible 不剪切内容也不添加纵向滚动条 overflow-x:scroll 总是显示横向滚动条...:不剪切内容也不添加滚动条。...div自定义滚动条样式 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar 定义了滚动条整体的样式; ::-webkit-scrollbar-thumb 滑块部分; ::-webkit-scrollbar-thumb

    11.4K60
    领券