时间戳

首页 > 解决方案 > 如何在台式机和笔记本电脑屏幕分辨率的网站上禁用垂直滚动？

javascript - 如何在台式机和笔记本电脑屏幕分辨率的网站上禁用垂直滚动？

问题描述

所以我们正在为客户设计一个网站，我们正在将我们的设计构建到一个 wordpress 框架上，问题是我们需要网站在台式机和笔记本电脑的屏幕上完全展开。

内容溢出的 div 内容（主要内容）有垂直滚动，但一般情况下整个屏幕不应该是可滚动的。我们很难将其制成不同的屏幕尺寸，因为我们正在手动更改几乎所有不同屏幕分辨率的边距和填充。

有没有更好的方法可以在 CSS 或 jquery 中实现？

您可以在以下位置查看我们创建的演示： http: //demo.unboundcodes.com/khandelwal/

它适用于一些流行的屏幕尺寸，但我们仍然无法取得成功，因为页面上的标题和主要内容之间仍然存在一些间距问题。

标签： javascriptjqueryhtmlcss

解决方案

使您的网站响应不同屏幕尺寸和平台的最佳解决方案是使用 css 媒体查询。您可以分别指定笔记本电脑屏幕、台式机、手机和平板电脑的行为。在那里，您可以将以下 css 属性用于笔记本电脑和台式机

overflow-x: hidden //if you want to stop x-axis scrolling
overflow-y: hidden //if you want to stop y-axis scrolling
overflow: hidden  //if you want to stop x and y-axis scrolling

有关详细说明，请查看以下内容： CSS Media Queries

推荐阅读