导航栏因滚动条隐藏/显示而产生晃动

问题:运用antd的Modal对话框开发时,在页面中点击按钮,弹出框出现后,默认给body添加了overflow:hidden;导致页面固定导航栏宽度有所改变,页面发生晃动。

问题截图:

原始样式

点击按钮后:

右边的滚动条消失,顶部导航栏被“拉开”。

而查看知乎的主页却没有上述问题,导航栏不会随滚动条的消失而被拉开。

解决办法:考虑动态给导航栏动态设置宽度,在生命周期中监听窗口滚动事件,判断有无滚动条,再减去滚动条的宽度。

componentDidMount(){
    window.addEventListener('resize',this.handlHeight)
  }
  handlHeight=()=>{
    const scrollWidth = document.body.clientWidth
    let width= `${scrollWidth -18}px`
    this.setState({
      width
    })
  }
  hasScrollbar=()=>{
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
  }

 

附:在模拟实现时,react动态添加样式的方法

hindleClick(){
    if (this.state.visity) {
      document.body.removeAttribute("class","add_bg");
      }else{
        document.getElementsByTagName("body")[0].className="add_bg";
      }
  this.setState({
    visity:!this.state.visity
  })

参考:https://www.cnblogs.com/nzbin/p/8117535.html

版权声明:本文为qq_29603991原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29603991/article/details/104788248

智能推荐

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

猜你喜欢

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...

机器学习算法之决策树

原文:http://www.jianshu.com/p/6eecdeee5012 决策树是一种简单高效并且具有强解释性的模型,广泛应用于数据分析领域。其本质是一颗由多个判断节点组成的树,如: 决策树 在使用模型进行预测时,根据输入参数依次在各个判断节点进行判断游走,最后到叶子节点即为预测结果。 如何构造决策树 决策树算法的核心是通过对数据的学习,选定判断节点,构造一颗合适的决策树。 假设我们从用户...

Netty实现一个简单的RPC框架

微服务 微服务通讯 API构建需要考虑的因素 通讯协议 文本协议或者二进制协议 支持的调用方式:单向、双向、Streaming API定义与声明 API容错、可伸缩性 RPC框架 REST http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm REST即Representational State Transf...

04-键值对操作(pair RDD)

前言 键值对(pair RDD)是Spark的一部分,与普通RDD具有相同的特性,却又拥有不同于普通RDD的一些特性和操作。 简单来pair RDD就是以key-value形式的RDD。 1 创建pair RDD 根据文本内容,以第一个单词作为键为例: map()函数需要设置key-value参数,如该例中:key=x.split(" ")[0], value=x。 2 pai...