那些遇到过的问题

滚动到逐节

Ing*_*dak 11 html javascript css jquery

我有HTML标记:

HTML:

<body>
    <header></header>

    <nav>
        <ul>
            <li><a href="#one">one</a></li>
            <li><a href="#two">two</a></li>
        </ul>
    </nav>

    <section id="one"></section>
    <section id="two"></section>

    <footer></footer>
</body>
Run Code Online (Sandbox Code Playgroud)

其中section是全屏(宽度:100%;高度:100%;),菜单具有绝对位置.

题:

  1. 如何使用鼠标滚动(或键)滚动并捕捉每个部分？
  2. 滚动到上一部分然后再向下滚动到#one并重复它.
  3. 当我点击链接时,它会滚动到部分.

感谢您的建议,想法,代码.

Alv*_*aro 16

如果你想要与IE8,9,Opera 12等旧浏览器的更多兼容性以及更多功能,我创建了一个可以使用fullPage.js的JavaScript库:

它提供的一些功能:

  • 兼容旧版浏览器,如IE 8,不支持CSS 3.
  • 链接部分与菜单和导航项目符号
  • 部分和幻灯片的URL锚点
  • 响应的高度和宽度选项
  • 回调和数十种选项和方法
  • 支持水平滑块
  • 触摸支持移动设备,平板电脑和触摸屏桌面
  • 使用键盘快捷键滑动页面

另外:

tam*_*rin 3

有趣的

\n\n

我偷了这个代码，更改了布局并尝试添加您提到的功能（1.scroll-snap + 2.单击链接时滚动）。\n不幸的是，我无法让第二个功能工作。

\n\n
    \n
  1. 添加滚动捕捉不是问题
    2. \n
\n\n

您需要scroll-snap-type: y mandatory;在容器上和scroll-snap-align: start;部分上。

\n\n

\r\n
\r\n
var doc = window.document,\r\n  context = doc.querySelector(\'.js-loop\'),\r\n  clones = context.querySelectorAll(\'.is-clone\'),\r\n  disableScroll = false,\r\n  scrollHeight = 0,\r\n  scrollPos = 0,\r\n  clonesHeight = 0,\r\n  i = 0;\r\n\r\nfunction getScrollPos () {\r\n  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);\r\n}\r\n\r\nfunction setScrollPos (pos) {\r\n  context.scrollTop = pos;\r\n}\r\n\r\nfunction getClonesHeight () {\r\n  clonesHeight = 0;\r\n\r\n  for (i = 0; i < clones.length; i += 1) {\r\n    clonesHeight = clonesHeight + clones[i].offsetHeight;\r\n  }\r\n\r\n  return clonesHeight;\r\n}\r\n\r\nfunction reCalc () {\r\n  scrollPos = getScrollPos();\r\n  scrollHeight = context.scrollHeight;\r\n  clonesHeight = getClonesHeight();\r\n\r\n  if (scrollPos <= 0) {\r\n    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling\r\n  }\r\n}\r\n\r\nfunction scrollUpdate () {\r\n  if (!disableScroll) {\r\n    scrollPos = getScrollPos();\r\n\r\n    if (clonesHeight + scrollPos >= scrollHeight) {\r\n      // Scroll to the top when you\xe2\x80\x99ve reached the bottom\r\n      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling\r\n      disableScroll = true;\r\n    } else if (scrollPos <= 0) {\r\n      // Scroll to the bottom when you reach the top\r\n      setScrollPos(scrollHeight - clonesHeight);\r\n      disableScroll = true;\r\n    }\r\n  }\r\n\r\n  if (disableScroll) {\r\n    // Disable scroll-jumping for a short time to avoid flickering\r\n    window.setTimeout(function () {\r\n      disableScroll = false;\r\n    }, 40);\r\n  }\r\n}\r\n\r\nfunction init () {\r\n  reCalc();\r\n  \r\n  context.addEventListener(\'scroll\', function () {\r\n    window.requestAnimationFrame(scrollUpdate);\r\n  }, false);\r\n\r\n  window.addEventListener(\'resize\', function () {\r\n    window.requestAnimationFrame(reCalc);\r\n  }, false);\r\n}\r\n\r\nif (document.readyState !== \'loading\') {\r\n  init()\r\n} else {\r\n  doc.addEventListener(\'DOMContentLoaded\', init, false)\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
html,\r\nbody {\r\n  height: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.Loop {\r\n  position: relative;\r\n  height: 100%;\r\n  overflow: scroll;\r\n  -webkit-overflow-scrolling: touch;\r\n  scroll-snap-type: y mandatory;\r\n}\r\n\r\nsection {\r\n  position: relative;\r\n  text-align: center;\r\n  height: 100%;\r\n  scroll-snap-align: start;\r\n}\r\n\r\n::scrollbar {\r\n  display: none;\r\n}\r\n\r\n\r\nbody {\r\n  font-family: "Avenir Next", Helvetica, sans-serif;\r\n  font-weight: normal;\r\n  font-size: 100%;\r\n  position: relative;\r\n}\r\n\r\nnav {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  z-index: 10;\r\n}\r\n\r\nnav ul {\r\n  display: flex;\r\n  justify-content: space-around;\r\n  margin: 0;\r\n  padding: 1rem 0;\r\n}\r\n\r\nnav ul li{\r\n  display: flex;\r\n  justify-content: space-around;\r\n}\r\n\r\n.nav-link{\r\n  text-decoration: none;\r\n  color: grey\r\n}\r\n\r\n.one {\r\n  background: black;\r\n}\r\n.two {\r\n  background: darkblue;\r\n}\r\n.three {\r\n  background: lightgreen;\r\n}\r\n.four {\r\n  background: lightcoral;\r\n}\r\n.five {\r\n  background: lightskyblue;\r\n}\r\n.six {\r\n  background: orange;\r\n}\r\n\r\nh1 {\r\n  margin: 0;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 100%;\r\n  font-size: 80px;\r\n  letter-spacing: 5px;\r\n  color: #fff;\r\n  text-transform: uppercase;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<nav>\r\n  <ul>\r\n    <li><a class="nav-link" href="#one">one</a></li>\r\n    <li><a class="nav-link" href="#two">two</a></li>\r\n    <li><a class="nav-link" href="#three">three</a></li>\r\n    <li><a class="nav-link" href="#four">four</a></li>\r\n    <li><a class="nav-link" href="#five">five</a></li>\r\n    <li><a class="nav-link" href="#six">six</a></li>\r\n  </ul>\r\n</nav>\r\n<main class="Loop js-loop">\r\n  <section class="one" id="one">\r\n    <h1>One</h1>\r\n  </section>\r\n  <section class="two" id="two">\r\n    <h1>Two</h1>\r\n  </section>\r\n  <section class="three" id="three">\r\n    <h1>Three</h1>\r\n  </section>\r\n  <section class="four" id="four">\r\n    <h1>Four</h1>\r\n  </section>\r\n  <section class="five" id="five">\r\n    <h1>Five</h1>\r\n  </section>\r\n  <section class="six" id="six">\r\n    <h1>Six</h1>\r\n  </section>\r\n\r\n  <!--\r\n  These blocks are the same as the first blocks to get that looping illusion going.\r\n  You need to add clones to fill out a full viewport height.\r\n  -->\r\n  <section class="one is-clone">\r\n    <h1>One</h1>\r\n  </section>\r\n  <section class="two is-clone">\r\n    <h1>Two</h1>\r\n  </section>\r\n\r\n</main>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

    \n
  1. 添加点击链接时的滚动是一个问题
    2. \n
\n\n

对于普通容器，您只需将其添加scroll-behaviour: smooth;到其中即可。但在这里，如果你这样做，你将失去循环错觉，因为你会看到它向后滚动第一个而不是看似继续。（它也会开始无限的来回滚动，我还无法修复）

\n\n

\r\n
\r\n
var doc = window.document,\r\n  context = doc.querySelector(\'.js-loop\'),\r\n  clones = context.querySelectorAll(\'.is-clone\'),\r\n  disableScroll = false,\r\n  scrollHeight = 0,\r\n  scrollPos = 0,\r\n  clonesHeight = 0,\r\n  i = 0;\r\n\r\nfunction getScrollPos () {\r\n  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);\r\n}\r\n\r\nfunction setScrollPos (pos) {\r\n  context.scrollTop = pos;\r\n}\r\n\r\nfunction getClonesHeight () {\r\n  clonesHeight = 0;\r\n\r\n  for (i = 0; i < clones.length; i += 1) {\r\n    clonesHeight = clonesHeight + clones[i].offsetHeight;\r\n  }\r\n\r\n  return clonesHeight;\r\n}\r\n\r\nfunction reCalc () {\r\n  scrollPos = getScrollPos();\r\n  scrollHeight = context.scrollHeight;\r\n  clonesHeight = getClonesHeight();\r\n\r\n  if (scrollPos <= 0) {\r\n    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling\r\n  }\r\n}\r\n\r\nfunction scrollUpdate () {\r\n  if (!disableScroll) {\r\n    scrollPos = getScrollPos();\r\n\r\n    if (clonesHeight + scrollPos >= scrollHeight) {\r\n      // Scroll to the top when you\xe2\x80\x99ve reached the bottom\r\n      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling\r\n      disableScroll = true;\r\n    } else if (scrollPos <= 0) {\r\n      // Scroll to the bottom when you reach the top\r\n      setScrollPos(scrollHeight - clonesHeight);\r\n      disableScroll = true;\r\n    }\r\n  }\r\n\r\n  if (disableScroll) {\r\n    // Disable scroll-jumping for a short time to avoid flickering\r\n    window.setTimeout(function () {\r\n      disableScroll = false;\r\n    }, 40);\r\n  }\r\n}\r\n\r\nfunction init () {\r\n  reCalc();\r\n  \r\n  context.addEventListener(\'scroll\', function () {\r\n    window.requestAnimationFrame(scrollUpdate);\r\n  }, false);\r\n\r\n  window.addEventListener(\'resize\', function () {\r\n    window.requestAnimationFrame(reCalc);\r\n  }, false);\r\n}\r\n\r\nif (document.readyState !== \'loading\') {\r\n  init()\r\n} else {\r\n  doc.addEventListener(\'DOMContentLoaded\', init, false)\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
html,\r\nbody {\r\n  height: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.Loop {\r\n  position: relative;\r\n  height: 100%;\r\n  overflow: scroll;\r\n  -webkit-overflow-scrolling: touch;\r\n  scroll-snap-type: y mandatory;\r\n  scroll-behavior: smooth;\r\n}\r\n\r\nsection {\r\n  position: relative;\r\n  text-align: center;\r\n  height: 100%;\r\n  scroll-snap-align: start;\r\n}\r\n\r\n::scrollbar {\r\n  display: none;\r\n}\r\n\r\n\r\nbody {\r\n  font-family: "Avenir Next", Helvetica, sans-serif;\r\n  font-weight: normal;\r\n  font-size: 100%;\r\n  position: relative;\r\n}\r\n\r\nnav {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  z-index: 10;\r\n}\r\n\r\nnav ul {\r\n  display: flex;\r\n  justify-content: space-around;\r\n  margin: 0;\r\n  padding: 1rem 0;\r\n}\r\n\r\nnav ul li{\r\n  display: flex;\r\n  justify-content: space-around;\r\n}\r\n\r\n.nav-link{\r\n  text-decoration: none;\r\n  color: grey\r\n}\r\n\r\n.one {\r\n  background: black;\r\n}\r\n.two {\r\n  background: darkblue;\r\n}\r\n.three {\r\n  background: lightgreen;\r\n}\r\n.four {\r\n  background: lightcoral;\r\n}\r\n.five {\r\n  background: lightskyblue;\r\n}\r\n.six {\r\n  background: orange;\r\n}\r\n\r\nh1 {\r\n  margin: 0;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 100%;\r\n  font-size: 80px;\r\n  letter-spacing: 5px;\r\n  color: #fff;\r\n  text-transform: uppercase;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<nav>\r\n  <ul>\r\n    <li><a class="nav-link" href="#one">one</a></li>\r\n    <li><a class="nav-link" href="#two">two</a></li>\r\n    <li><a class="nav-link" href="#three">three</a></li>\r\n    <li><a class="nav-link" href="#four">four</a></li>\r\n    <li><a class="nav-link" href="#five">five</a></li>\r\n    <li><a class="nav-link" href="#six">six</a></li>\r\n  </ul>\r\n</nav>\r\n<main class="Loop js-loop">\r\n  <section class="one" id="one">\r\n    <h1>One</h1>\r\n  </section>\r\n  <section class="two" id="two">\r\n    <h1>Two</h1>\r\n  </section>\r\n  <section class="three" id="three">\r\n    <h1>Three</h1>\r\n  </section>\r\n  <section class="four" id="four">\r\n    <h1>Four</h1>\r\n  </section>\r\n  <section class="five" id="five">\r\n    <h1>Five</h1>\r\n  </section>\r\n  <section class="six" id="six">\r\n    <h1>Six</h1>\r\n  </section>\r\n\r\n  <!--\r\n  This block is the same as the first block to get that looping illusion going.\r\n  You need to add clones to fill out a full viewport height.\r\n  -->\r\n  <section class="one is-clone">\r\n    <h1>One</h1>\r\n  </section>\r\n  <section class="two is-clone">\r\n    <h1>Two</h1>\r\n  </section>\r\n\r\n</main>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

我知道这段代码还不是 100% 起作用，但我认为它可以引导我们得到更好的答案。

\n

归档时间：

查看次数：

34046 次

最近记录：

9 年，1 月 前
相关归档
纯JavaScript相当于jQuery的$ .ready() - 如何在页面/ DOM准备就绪时调用函数 1244
如何从javascript关联数组中删除对象？ 586
jQuery Data vs Attr？ 502
如何向表行<tr>添加边距 167
获取元素相对于父容器的位置/偏移量？ 111
jQuery append()和remove()元素 41
在jQuery中获取发件人 33
JQuery可拖动并可在IFrame上调整大小(解决方案) 21
removeEventListener不知道该函数 20
.delay()和.setTimeout() 19
难疑归档
C++中的" - >"运算符是什么？ 8590
如何在JavaScript中替换所有出现的字符串 4081
如何使用正则表达式验证电子邮件地址？ 3201
迭代字典的最佳方法是什么？ 2455
PHP:从数组中删除元素 2362
做一个"git export"(比如"svn export")？ 2312
在Python中手动引发(抛出)异常 2079
我应该在哪里将<script>标记放在HTML标记中？ 1392
什么是右值,左值,x值,glvalues和prvalues？ 1291
在文本框中的Enter键上使用JavaScript触发按钮单击 1250