javascript - 为什么我不能在我的网页上滚动？-6ren

javascript - 为什么我不能在我的网页上滚动？

转载作者：太空宇宙更新时间：2023-11-04 08:17:01

26

4

我使用的是 Chromebook，但无法在我的网页上滚动。我没有任何其他设备可以对其进行测试，所以可能只有 Chromebook。我的代码如下。单击问题所在的联系我按钮。您可能需要在编辑器中复制和粘贴代码，因为 SO 上的预览很小。

function contact_anim() {
  $('#links-div').fadeOut('slow', function() {
    $("#contact-form").fadeIn();
  });
}

function cancel_contact_anim() {
  $('#contact-form').fadeOut('slow', function() {
    $('#links-div').fadeIn();
  });
}

body {
  background-image: url('amsterdam1920x1080.jpg');
  background-size: auto;
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-align: center;
  color: white;
  background-attachment: fixed;
}

#main {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(252, 0, 0, 0.67);
}

#links-div {
  margin: 50px;
}

.links {
  text-decoration: none;
  color: white;
  font-weight: bold;
  border: 8px solid white;
  padding: 13px;
  font-size: 22px;
  display: block;
  border-radius: 50px;
  width: 170px;
  margin: 0 auto;
}

h1 {
  font-size: 50px;
}

p {
  font-size: 27px;
}

.links:hover {
  background-color: white;
}

input[type="text"], #msg {
  width: 50%;
  margin: 15px;
  height: 40px;
  resize: none;
  border: none;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  font-size: 20px;
}

#msg {
  height: 225px;
}

#contact-form {
  width: 50%;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>j0rdan.me</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="main">
      <h1>j0rdan.me</h1>
      <p>This site is currently in the making, but<br>feel free to take a look around</p>
      <div id="links-div">
        <a href="#" id="about" class="links">ABOUT ME</a><br/><br/>
        <a href="#" id="contact" class="links" onclick="contact_anim()">CONTACT ME</a><br/><br/>
        <a href="#" id="projects" class="links">MY PROJECTS</a><br/><br/>
      </div>

      <form id="contact-form" action="contact.php" method="post" style="display: none">
        <input type="text" id="name" placeholder="Name"><br/>
        <input type="text" id="email" placeholder="Email"><br/>
        <textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <button type="submit" id="send" name="send">Send</button>
      </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
    <script src="animation_handlers.js" charset="utf-8"></script>
  </body>
</html>

最佳答案

您需要将 overflow-y: scroll 添加到您的 #main 规则中。 fixed 位置使其不可滚动:

function contact_anim() {
  $('#links-div').fadeOut('slow', function() {
    $("#contact-form").fadeIn();
  });
}

function cancel_contact_anim() {
  $('#contact-form').fadeOut('slow', function() {
    $('#links-div').fadeIn();
  });
}

body {
  background-image: url('amsterdam1920x1080.jpg');
  background-size: auto;
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-align: center;
  color: white;
  background-attachment: fixed;
}

#main {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  background-color: rgba(252, 0, 0, 0.67);
}

#links-div {
  margin: 50px;
}

.links {
  text-decoration: none;
  color: white;
  font-weight: bold;
  border: 8px solid white;
  padding: 13px;
  font-size: 22px;
  display: block;
  border-radius: 50px;
  width: 170px;
  margin: 0 auto;
}

h1 {
  font-size: 50px;
}

p {
  font-size: 27px;
}

.links:hover {
  background-color: white;
}

input[type="text"], #msg {
  width: 50%;
  margin: 15px;
  height: 40px;
  resize: none;
  border: none;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  font-size: 20px;
}

#msg {
  height: 225px;
}

#contact-form {
  width: 50%;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>j0rdan.me</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="main">
      <h1>j0rdan.me</h1>
      <p>This site is currently in the making, but<br>feel free to take a look around</p>
      <div id="links-div">
        <a href="#" id="about" class="links">ABOUT ME</a><br/><br/>
        <a href="#" id="contact" class="links" onclick="contact_anim()">CONTACT ME</a><br/><br/>
        <a href="#" id="projects" class="links">MY PROJECTS</a><br/><br/>
      </div>

      <form id="contact-form" action="contact.php" method="post" style="display: none">
        <input type="text" id="name" placeholder="Name"><br/>
        <input type="text" id="email" placeholder="Email"><br/>
        <textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <button type="submit" id="send" name="send">Send</button>
      </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
    <script src="animation_handlers.js" charset="utf-8"></script>
  </body>
</html>

关于javascript - 为什么我不能在我的网页上滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45829073/

26

4

0

文章推荐： javascript - 如何将 png 背景图像和填充颜色添加到 SVG？

文章推荐： java - java 上的 Json-rpc 服务用于 jquery 终端模拟器

文章推荐： c - 为什么这不打印到标准输出 (stdout)？

文章推荐： python - 如何将用户输入放入 CSV 文件？

javascript - (不能)在javascript中获取元素样式的一部分
我是 javascript 的新手(今天开始弄乱它)。我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常，除了条形
ios - 不能 "addSubView"
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
swift - 不能 CGEventTapCreate
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误，但是当我运行时， gua
c++ - 不能 dynamic_cast
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
不能 strcat_s 多个字符到字符串指针
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
不能 dup2 将管道的末端写入标准输出
我在使用 dup2() 和 pipe() 时遇到问题。当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时，我收到了 EBADF。我用 gdb 在 dup2(pout[1], ST
Git:不能 pull
首先，我应该说我运行的是 Windows 7。因此，今天早上我尝试像往常一样从我的存储库中提取数据，但我做不到。我得到了错误: The authenticity of host 'github.co
python - 不能 "activate"virtualenv
刚开始在虚拟环境中运行Python，乱用Django，无法激活虚拟环境。花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv)，但没有成功。避免使用“sudo pip inst
r - 数据框可以做什么而 tibble 不能？
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如，与数据框不同，小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。不
javascript - 不能 Dockerize Elm
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知，我已经创建了一个完整且有效的 Docker 文件……但它不起作用。我会解释的。所以我的脚本在 3 个文件中运行。首先是启动
java - 不能 Mockbean HttpServletResponse
我可以在 Controller 中使用@Autowired，例如 @RestController public class Index { @Autowired HttpServlet
function - 不能 `compose` 和方法和函数
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。我的问
javascript - 不能 .map() 一个看似数组的值
当我控制台单独记录变量“pokemons”时，它确实返回一个数组。但是当我尝试映射它时，出现错误: TypeError: pokemons.map is not a function 我的代码: im
python - 不能 `import smtplib`
每当我尝试在 Python 解释器中导入 smtplib 时，都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题？编辑:这是完整
javascript - 为什么 {{#each}} 可以正常工作而 {{#with}} 不能？
我正在使用 Meteor.js 开发一个项目，但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项，并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
java - onTouchEvent 不能@Override
你好，我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
java - 不能@Autowired接口(interface)
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中和我的 Controller 类是 @Controller pub
c++ - 不能 #include
我试图在 mainwindow.cpp 中包含 QtSvg，但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
postgresql - 不能 100% 确定这是否安全
鉴于以下 PostgreSQL 代码，我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
MYSQL:不能/如何将子查询用作完全合格的 CTE
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。请注意:这个查询显然非常

首页

博学

6Ren·AI

商城

javascript - 为什么我不能在我的网页上滚动？