首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React中将一直增加消息的滚动框保持在当前浏览的位置

通常需要一个滚动框来展示所有消息,且每次的新消息都会展示在滚框的顶部,但同时这个消息滚动框还是可以拖动鼠标浏览的。...解决思路如下:在新消息来了更新页面前,获取当前页面的高度A,更新完成后,用新的页面高度B减去之前的页面高度A得出值C,C的值即为滚动条因为新增了消息自动滚动了多少,然后在更新完成后的页面上获取scrollTop...此时新消息来了,就可以保证我们当前浏览的消息相对整个滚动框仍然保持以前的位置。 其实很简单,但是讲起来有点绕,不知道我有没有说清楚,没有听明白的放学别走来找我。  以下是代码实现,方便大家抄作业。...// 卸载时清除定时器 componentWillUnmount() { window.clearInterval(this.interval); } // 更新前获取当前的滚动高度...getSnapshotBeforeUpdate() { return this.rootNode.scrollHeight; } // 将滚动的高度重新计算赋值 componentDidUpdate

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

    Windows 通过编辑注册表设置左右手使用习惯更改 Popup 弹出位置

    本文告诉大家如何在通过更改注册表的设置,从而更改平板电脑设置 Tablet PC Settings 的左右手使用习惯 Handedness 的惯用左手和惯用右手选项 在用户端,可以通过在运行里面,输入...80F3F1D5-FECA-45F3-BC32-752C152E456E} 按下回车,可以进入平板电脑设置界面,中文版和英文版界面分别如下 这个选项将会影响 WPF 的 Popup 弹出的默认方向位置...,以及所有的菜单的弹出方向位置 设置惯用左手时的 Popup 弹出行为如下: 设置惯用右手时的 Popup 弹出行为如下: 通过注册表修改设置的方式是在运行里输入 regedit 打开注册表编辑,进入...默认的 MenuDropAlignment 选项是 0 的值,不同的值对应如下 0 : 默认值,惯用左手 1 : 惯用右手 可通过更改 HKEY_CURRENT_USER\SOFTWARE\Microsoft...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:https://blog.lindexi.com),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

    1.2K10

    c# WinForm开发 DataGridView控件的各种操作总结(单元格操作,属性设置)

    ********DataGridView 设定单元格仅仅读: 1) 使用 ReadOnly 属性 ? ...******DataGridView 冻结列或行 1) 列冻结 DataGridViewColumn.Frozen 属性为 True 时, 该列左側的全部列被固定, 横向滚动时固定列不随滚动栏滚动而左右移动...2) 行冻结 DataGridViewRow.Frozen 属性为 True 时, 该行上面的全部行被固定, 纵向滚动时固定行不随滚动栏滚动而上下移动。...Console.WriteLine(“{0} 的位置改变到 {1} “, e.Column.Name, e.Column.DisplayIndex); } ********DataGridView...比起使用循环遍历,使用该事件来设定右键菜单的效率更高。可是,在DataGridView使用了DataSource绑定并且是VirtualMode的时候,该事件将不被引发。

    4.4K10

    C#—— DataGridView控件的各种操作总结(单元格操作,属性设置)

    ********DataGridView 设定单元格只读: 1) 使用 ReadOnly 属性 ? ...******DataGridView 冻结列或行 1) 列冻结 DataGridViewColumn.Frozen 属性为 True 时, 该列左侧的所有列被固定, 横向滚动时固定列不随滚动条滚动而左右移动...2) 行冻结 DataGridViewRow.Frozen 属性为 True 时, 该行上面的所有行被固定, 纵向滚动时固定行不随滚动条滚动而上下移动。...("{0} 的位置改变到 {1} ", e.Column.Name, e.Column.DisplayIndex); } ********DataGridView 新加行的默认值的设定 需要指定新加行的默认值的时候...比起 使用循环遍历,使用该事件来设定右键菜单的效率更高。但是,在DataGridView使用了DataSource绑定而且是VirtualMode的时 候,该事件将不被引发。

    9.4K32

    【转】基于C#的WinForm中DataGridView控件操作汇总

    ********DataGridView 设定单元格只读: 1) 使用 ReadOnly 属性 ? ...******DataGridView 冻结列或行 1) 列冻结 DataGridViewColumn.Frozen 属性为 True 时, 该列左侧的所有列被固定, 横向滚动时固定列不随滚动条滚动而左右移动...2) 行冻结 DataGridViewRow.Frozen 属性为 True 时, 该行上面的所有行被固定, 纵向滚动时固定行不随滚动条滚动而上下移动。...("{0} 的位置改变到 {1} ", e.Column.Name, e.Column.DisplayIndex); } ********DataGridView 新加行的默认值的设定...比起使用循环遍历,使用该事件来设定右键菜单的效率更高。但是,在DataGridView使用了DataSource绑定而且是 VirtualMode的时候,该事件将不被引发。

    5.3K50

    Excel集成网页控件,内嵌于Excel单元格区域,可加载任意网页

    PictureBox控件,快速录入功能时为DataGridView、TextBox、Label等多个控件组合,日期录入时为日期控件。...同样地插入后的网页,不能类似普通图片那样轻松选择调整大小删除移动位置。如果有使用过Excel催化剂的插入图片功能,就可以知道其中的不同。...通过在网页控件鼠标右键弹出的上下文菜单中,可供满足上述的需求。 关于冻结单元格区域,这里简单说明下,在不作冻结的默认情况下,鼠标滚动操作是对Excel工作表的单元格区域右侧滚动条的滚动操作。...而当需要保留到网页控件中当前网页的鼠标滚轮的激发操作如普通网页有右侧滚动条时,会滚动网页位置和特殊的网页如EasyShu生成的ECharts图表网页,滚动操作有放大缩小矢量地图的作用。...此时选择上下文菜单第一项【冻结单元格区域】,即可屏蔽Excel的鼠标滚动操作,让网页的滚动生效,同样地第二项的【取消冻结单元格区域】,即恢复Excel默认效果。

    1.2K30

    C#二十八 数据绑定

    在Windows中绑定是将操作界面和数据源的数据保持一致,即实现操作界面的增删改查与数据库的增删改查一致,这里所说的数据源指数据集或数据表,而窗体可以是Windows窗体或Web窗体,在这里,我们研究关于...重点: Ø 掌握 DataGridView 控件的使用 Ø DataGridView常用属性和方法 Ø 简单绑定 Ø 利用绑定控件从数据源读取数据 预习功课: Ø...如何使用DataGridView Ø DataGridView常用属性和方法 Ø 简单绑定 ​5.1 DataGridView控件​ 在项目开发中,怎么样将数据库的中数据显示到界面上呢...DataGridView控件里面的数据通常是使用绑定的方式提供的,比如你可以把DataGridView控件绑定到数据集中的数据表,那么DataGridView控件就会自动显示这个数据表中的数据,如上图,...ReadOnly 是否可以编辑单元格 DataPropertyName 绑定的数据列的名称 HeaderText 列标题文本 Visible 指定列是否可见 Frozen 指定水平滚动DataGridView

    11110

    (八十九)c#Winform自定义控件-自定义滚动条(treeview、panel、datagridview、listbox、listview、textbox)

    准备工作 这个是在前面滚动条上完善的,加入了对常用控件滚动条的美化,实现逻辑是添加一个滚动条控件,然后覆盖在滚动条上面,然后实现联动 绘制滚动条的工作,你可以参考 (六十九)c#Winform自定义控件...return false; 45 } 添加扩展属性 1 [Browsable(true), Category("自定义属性"), Description("是否使用自定义滚动条...dgv.FirstDisplayedScrollingColumnHiddenWidth; 183 barH.BringToFront(); 184 } 185 } 位置改变时候修改滚动条.../} 91 SetHMaxNum(control); 92 } 93 } 94 } 滑动滚动条的处理滚动...return false; 68 } 69 70 [Browsable(true), Category("自定义属性"), Description("是否使用自定义滚动条

    2K30

    可视化数据库设计软件有哪些_数据库可视化编程

    2)EndEdit方法:将挂起的更改应用于基础数据源。 3)CancelEdit方法:取消当前的编辑操作。 4)Add方法:将现有项添加到内部列表中。...控件一起使用可以在窗体的数据记录之间移动并与这些记录进行交互。...用户可以使用 DataGridView 控件来显示少量数据的只读视图,也可以对其进行缩放以显示特大数据集的可编辑视图。...3.DataGridView的当前行CurrentRow CurrentRow属性用于获取包含DataGridView控件当前的行,使用方式如下。...(2)改变字段位置 单击“改变字段位置”按钮,可改变字段在数据表控件中的位置顺序。 (3)设置字段属性 在“编辑列”对话框右侧为每个字段的属性编辑器。

    6.7K40

    知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

    回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式 一、回到顶部 方法: 1....} }, 10); }); 二、$(window).scroll()禁用和启用 禁用:$(window).off('scroll',handle)其中handle是滚动绑定的函数...启用:绑定的时候如果使用的是匿名函数,则需要将该函数重写一次。如果不是匿名函数的话直接执行该函数。...三、鼠标滚动到指定位置才显示某元素 $(window).scroll(function() { var scrollTop = $(this).scrollTop();...四、使用jQuery判断字符串是不是json格式的 isJSON: function(str) { if (typeof str == 'string') {

    1.2K10

    MultiRow中文版技术白皮书

    为了实现自由布局的数据展示方式,MultiRow在架构设计时打破了常用表格控件的行列概念,可以任意操作单元格的位置和大小,可以让上下两个单元格自由叠加,也可以设计个性化的列头和列脚,提供自动对齐工具以保证版面布局的美观...保持开放性,支持第三方控件的嵌入 同时,MultiRow的单元格设计采用开放的体系结构,支持第三方控件的嵌入,保持了良好的扩展性和对于特殊应用需求的支持。...重视易用性 为了降低用户的学习成本,MultiRow采用了和DataGridView相似的接口设计,对于曾经使用过Microsoft DataGridView或者熟悉DataGridView接口设计的开发人员...,使用起来会更加的的方便快捷。...同时,得益于MultiRow的独特设计,能够达到百万行数据的平滑滚动。行和单元格的虚拟机制更让大数据量的内存消耗达到最低,让最终用户体验不一样的速度。

    1.3K50

    MultiRow发现之旅(四)- 使用MultiRow开发WinForm应用(附源码)

    传统的表格控件在展示数据表当中的一条记录时,大部分都是将一条记录展示在表格控件当中独立的一行里,每行当中的列对应数据表当中的一列,比如.net framework 提供的DataGridView控件,它做数据绑定绑定之后...上面创建的数据库有19个字段,如果使用DataGridView展示,应用程序将需要更宽的距离才能完全展示一条记录。这样导致可读性大打折扣。...而使用MulitRow,你可以随心所欲地在MulitRow的一个Row上面安排每个Cell的排列位置,甚至可以让多个Cell叠加,让每个Cell来展示数据表记录当中的每个数据域。...GcMultiRow提供的按行滚动的效果,看起来就像是一条一条在浏览。...你也可以保持Form上面不管如何放缩都保持只有一个Row,这个需要写几行代码,在这里我就不演示了,如果感兴趣,可以访问GCDN的MulitRow专区,我们可以一起讨论一些细节的问题。

    1.3K100

    Material Design — App bars: topApp bars: top

    原则 ·始终保持 Top app bar 出现在 app 中每个屏幕的顶部,并且可以在滚动时消失。 ·引导 Top app bars 提供了一种可靠的方式来引导用户浏览 app。...Top app bar可以转换为 contextual action bar,在采取行动或将其解除前保持活动状态。...手机和平板电脑上标题的默认位置取决于平台。  ? 如果标题文本很长,请使用 prominent app bar 并将标题折叠为两行 ? ?...在滚动时,它们会增加海拔并让内容在它们后面滚动 ? 当向上滚动时,使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。...Bar  当 top app bar 变换为 contextual action bar 时,bar 应更改颜色以指示状态更改。

    2.3K60

    C#实现WinForm DataGridView控件支持叠加数据绑定

    我们都知道WinForm DataGridView控件支持数据绑定,使用方法很简单,只需将DataSource属性指定到相应的数据源即可,但需注意数据源必须支持IListSource类型,这里说的是支持...控件未实现IAppendDataAbleDataGridView>,无法使用该方法!")...方法种注释掉的方法是我写的显示遮罩层的方法,如果大家需要,可以查看我的这篇博文:Winform应用程序实现通用遮罩层 使用方法如下: 1.添加DataGridView控件,然后将DataGridView...类型更改为DataGridView2类型,当然如果大家不需要进行扩展约束,那就无需更改DataGridView控件类型。...grid.Rows.RemoveAt(rowIndex); grid.Rows.AddRange(rows.ToArray()); } } 使用方法不变

    1.9K30
    领券