铬61身体不滚动:解决前端页面滚动问题

在前端页面开发中,经常会遇到页面滚动位置不正确的问题。其中一个常见的问题是在使用Chrome 61浏览器时,页面的body元素无法滚动。

问题分析

通过对该问题进行分析,可以得出以下结论:

  1. 该问题只出现在Chrome 61浏览器上,其他浏览器不存在该问题。
  2. 该问题与CSS样式有关。
  3. 该问题涉及到滚动容器的设置。

解决方案

方案一:使用固定高度的div容器

该方案的思路是在body元素外部套一层固定高度的div容器,并设置overflow-y属性为auto来实现滚动。代码如下:

--------- -----
------
------
  ----- ----------------
  --------------- --------------------
  -------
    ---- -
      ------- --
      -------- --
    -
    ---------- -
      ------- ------
      ----------- -----
    -
  --------
-------
------
  ---- ------------------
    ---- ---- ---
  ------
-------
-------

方案二:使用fixed定位的元素

该方案的思路是在页面中添加一个fixed定位的元素,并将其宽度和高度都设置为100%。代码如下:

--------- -----
------
------
  ----- ----------------
  --------------- --------------------
  -------
    ---- -
      ------- --
      -------- --
      ------- -----
    -
    ------ -
      --------- ------
      ------ -----
      ------- -----
      ----------- -----
    -
  --------
-------
------
  ---- -----------
    ---- ---- ---
  ------
-------
-------

总结

以上两种方案都可以有效地解决Chrome 61中页面无法滚动的问题。但是,第一种方案可能会导致整个页面向上移动一段距离,而第二种方案则需要在页面中添加一个额外的元素。

因此,在实际开发中,需要根据具体情况选择最适合自己项目的解决方案。同时,也应该注意CSS样式对页面滚动的影响,以避免类似的问题再次出现。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/15652


猜你喜欢

  • JavaScript 分割符:详细介绍及示例代码

    在 JavaScript 中,分割字符串是一个很常见的操作。分割字符串意味着将一个字符串按照指定的分隔符拆分成多个子字符串,并将这些子字符串存储到一个数组中。本文将详细介绍 JavaScript 中的...

    7 年前
  • WebRTC和WebSockets:有何区别?

    在前端开发中,WebRTC和WebSockets是两个常见的技术。它们都可以用于实现实时通信,但却有着不同的应用场景和实现方式。 WebRTC WebRTC 是一种基于浏览器的实时通信技术,它可以让你...

    7 年前
  • 如何通过论证Mongo Script

    在现代web开发中,前端技术已经成为了不可或缺的一部分。其中,MongoDB是一个流行的NoSQL数据库,其Script功能可以让我们更好地管理和操作数据。本文将详细介绍如何通过论证Mongo Scr...

    7 年前
  • 日期在JavaScript中的区别

    JavaScript中处理日期的方式与其他编程语言有所不同,这是由于JavaScript中的日期对象设计的目的和特性。本文将探索JavaScript中日期的基础知识、常见问题以及如何正确地使用日期对象...

    7 年前
  • 如何添加新的 <li> 以 <ul> onclick JavaScript

    在网页开发中,经常需要使用JavaScript来改变DOM元素。其中包括动态添加和删除元素,这对于前端工程师来说是一个必不可少的技能。本文将介绍如何使用JavaScript向现有的HTML列表中添加新...

    7 年前
  • JavaScript字符串中有多少字节?

    在JavaScript中,字符串是一种常见的数据类型。它们通常用于存储文本和字符数据。然而,在处理字符串时,我们可能需要知道它们实际上占用了多少字节。 字符串长度与字节数 在JavaScript中,字...

    7 年前
  • 通过 Node.js 将 Base64 编码的图像上传到 Amazon S3

    在前端开发中,图片资源是非常重要的一部分。但有时候我们需要将图片转换为 Base64 编码的形式,这种方式可以减少 HTTP 请求次数,提高网页加载速度。本文将介绍如何通过 Node.js 将 Bas...

    7 年前
  • 通过JavaScript获取本地局域网IP地址

    背景 在Web开发过程中,有时需要获取用户的IP地址。通常情况下,可以通过HTTP请求头中的"X-Forwarded-For"字段或者"Remote Address"字段获取到用户的公网IP地址。

    7 年前
  • 如何给一个BLOB作为表单文件名上传?

    在前端开发中,我们通常使用表单来上传文件。但有时候,我们需要以程序生成的方式指定上传文件的名称,而不是使用用户选择的文件名。这种情况下,我们可以使用 Blob 对象来创建一个虚拟的文件,并将其作为表单...

    7 年前
  • 使用JavaScript添加内联样式

    在前端开发中,经常需要动态地为HTML元素设置样式。除了使用CSS文件和style标签外,还可以使用JavaScript添加内联样式。本文将介绍如何使用JavaScript添加内联样式,并提供示例代码...

    7 年前
  • JavaScript数组#地图:指标参数

    在JavaScript中,数组是一种非常有用的数据结构。其中一个强大的功能是地图(Map),它允许您将值映射到键上。使用地图可以轻松地解决许多问题,例如查找和过滤数据。

    7 年前
  • 通过索引访问非数值对象属性?

    在前端开发中,我们经常需要通过对象的属性来获取或设置相应的数据。通常,我们可以使用点号表示法或方括号表示法来访问对象的属性。但是,在某些情况下,我们可能需要访问非数值对象属性(例如,属性名为字符串或 ...

    7 年前
  • 在前端中通过单击按钮刷新页面

    在Web开发中,有时我们需要通过用户的交互来更新页面内容。其中一种方法是让用户点击一个按钮来刷新页面。本文将介绍如何实现这样的功能。 步骤 首先,在HTML文件中添加一个按钮元素: -------...

    7 年前
  • 基于另一个数组的JavaScript排序数组

    在前端开发中,我们经常需要对数组进行排序。通常情况下,我们可以使用 JavaScript 内置的 sort() 方法来实现数组排序。但是,在某些情况下,我们可能需要根据另一个数组的值来排序,这时候就需...

    7 年前
  • 使用字符串调用 JavaScript 函数名

    在前端开发中,我们经常需要动态地调用不同的函数。而有时候,我们需要使用字符串来指定要调用的函数名称。这种情况下,我们可以使用一些技巧来实现。 直接使用 window 对象 JavaScript 的全局...

    7 年前
  • 使用jQuery获取所有表单元素值吗?

    在前端开发中,我们经常需要获取表单元素的值,以便进行数据处理或提交表单。而jQuery是一款广泛使用的JavaScript库,提供了丰富的DOM操作和选择器功能,可以方便地获取表单元素的值。

    7 年前
  • 停止 RequireJS 自动添加 JS 文件扩展名,是否可行?

    RequireJS 是一个流行的 JavaScript 模块加载器,它向开发者提供了一种组织和加载代码的方式。默认情况下,当我们使用 RequireJS 加载一个模块时,如果我们没有在模块名称中显式地...

    7 年前
  • 在Rails中为每个视图创建JavaScript文件

    在现代Web应用程序开发中,JavaScript已经变得越来越重要。在Rails应用程序中,通过将JavaScript代码分离到单独的文件中来增强可维护性和重用性是一种最佳实践。

    7 年前
  • 如何从 ACE 编辑器获得值?

    在前端开发中,ACE 编辑器是一个非常流行的代码编辑工具。但是,在某些情况下,您可能需要从 ACE 编辑器中获取用户输入的值,例如将其保存到数据库或处理其它逻辑。 本文将介绍如何从 ACE 编辑器中获...

    7 年前
  • 如何使用 jQuery 删除父元素

    在前端开发中,经常需要操作 DOM 元素。有时候我们需要删除一个元素及其所有子元素,而 jQuery 提供了非常方便的方式来完成这个任务。本文将介绍如何使用 jQuery 删除父元素,并提供示例代码。

    7 年前

相关推荐

    暂无文章