Fatal编程技术网
  • javascript/
  • Javascript 应用transform:translate（X）后，水平滚动菜单粘滞，是否可以检测用户何时滚动回ID？

Javascript 应用transform:translate（X）后，水平滚动菜单粘滞，是否可以检测用户何时滚动回ID？

javascript html css menu

Javascript 应用transform:translate（X）后，水平滚动菜单粘滞，是否可以检测用户何时滚动回ID？,javascript,html,css,menu,off-canvas-menu,Javascript,Html,Css,Menu,Off Canvas Menu,在我的网站上，我有一个案例研究页面，非常长，有10个部分，所以我想创建一个水平菜单，其中包含指向页面上每个部分的链接。用户将能够为小屏幕设备水平滑动此选项，以便用户可以访问通常位于视口画布之外的链接 我知道如何实现这一切，但我需要的是这个；当用户向下滚动并到达第五个部分时，如果菜单链接稍微偏离右侧的画布，则菜单将向左滑动足够多，以便链接图标显示在最左侧的视口中。反过来，这将把其他链接也带到画布上 但问题是，如果我向滚动菜单容器添加一个类，该类指定一个transform:translate（X）值

在我的网站上，我有一个案例研究页面，非常长，有10个部分，所以我想创建一个水平菜单，其中包含指向页面上每个部分的链接。用户将能够为小屏幕设备水平滑动此选项，以便用户可以访问通常位于视口画布之外的链接

我知道如何实现这一切，但我需要的是这个；当用户向下滚动并到达第五个部分时，如果菜单链接稍微偏离右侧的画布，则菜单将向左滑动足够多，以便链接图标显示在最左侧的视口中。反过来，这将把其他链接也带到画布上

但问题是，如果我向滚动菜单容器添加一个类，该类指定一个transform:translate（X）值，并因此在用户到达特定部分时将其设置为左侧动画，则整个菜单将在该点修复，用户不可能手动来回滑动菜单，从那时起访问他们想要的任何菜单链接

我也希望同样的事情反过来发生，这样在上面的触发和菜单向左移动之后，当用户决定向上滚动页面并通过触发初始菜单滑动动作的部分时，它会向右滑动到其原始位置

这种触发菜单幻灯片的行为应该在用户每次或任何时候沿任意方向（向上或向下）滚动超过某个点时发生，但用户仍然可以手动将菜单滑动到任意点

我知道所有这一切都可以使用Javascript实现，但我尝试了很多不同的想法，包括element.scrollintoView，它不起作用，因为在菜单中将其分配给一个ID不会滑动整个菜单。我还尝试通过添加动画类来移动菜单，但也没有成功

更新：

我在代码笔上创建了一个基本示例：


水平滚动菜单
水平滚动菜单
家
新闻
接触
关于
支持
博客
工具
基础
习俗
推荐书
更多
正文，html{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：16px；
背景色：白色；
}
html{
滚动行为：平滑；
}
包装纸{
显示：块；
宽度：360px；
保证金：0自动；
背景色：黑色；
填充顶部：20px；
}
h1{
字体系列：无衬线；
字体大小：3.5rem；
颜色：白色；
填充：0px 20px；
}
氢{
字体系列：无衬线；
字体大小：2.5rem；
颜色：白色；
}
部分{
宽度：360px；
背景色：透明；
}
.货柜标题{
填充：20px 20px 20px 20px；
}
.集装箱{
填充：200px 40px 200px 40px；
}
div#滚动菜单{
位置：固定；
底部：0；
背景色：#333；
溢出：自动；
空白：nowrap；
宽度：360px；
保证金：0自动；
文本对齐：居中；
填充：0；
保证金：0；
}
div#滚动菜单a{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：25px 25px；
文字装饰：无；
}
div#滚动菜单a：悬停{
背景色：#777；
}
.主动{
背景色：#777；
}
.向左滑动{
转换：translateX（-300px）；
转变：转变0.5s；
}
$（窗口）。滚动（函数（）{
var hT=$（'#about'）.offset（）.top，
hH=$（'#about'）.outerHeight（），
wH=$（窗口）.height（），
wS=$（this.scrollTop（）；
如果（wS>（hT+hH-wH））{
$（“.scroll links container”）.addClass（“向左滑动”）；
}
});
您将看到，我添加了一些javascript，试图在页面向下滚动到#about部分时让菜单向左滚动，以便底部菜单中的“about”链接滑动到视口的最左侧。但它似乎不起作用

正如我在上一篇文章中所解释的，这就是我试图实现的目标，同时使菜单向后滚动，以便当用户向后滚动到“关于”部分时，“主页”链接位于视口最左侧的原始位置

我还需要用户仍然能够手动滑动菜单左右后，上述行为已经发生

我非常感谢任何人在这方面给予的帮助

非常感谢

Marc

请不要忘了在你的问题上贴一个帖子。我们是软件开发人员，不阅读（特别是手册）…嗨，雷内，谢谢你的评论。好的，我已经创建了一个关于codepen的基本示例：您提到的菜单的代码在哪里？我只找到一个
列表，每个列表都有一个
.container
和文本内容，还有一个空的JS滚动处理程序。请注意，您不能在SO上发布作业，而希望有人为您构建作业。无论如何，您可以在这里找到（）。这也是一个不错的选择。对于您的垂直滚动： 
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Horizontal Scrolling Menu</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <wrapper>
    <div class="container heading">
        <h1>Horizontal Scrolling Menu</h1>
    </div>
        
    <section id="home" class="page-section">
        <div class="container">
            <h2>Home</h2>
        </div>
    </section>
        
    <section id="news" class="page-section">
        <div class="container">
            <h2>News</h2>
        </div>
    </section>
        
    <section id="contact" class="page-section">
        <div class="container">
            <h2>Contact</h2>
        </div>
    </section>
        
    <section id="about" class="page-section">
        <div class="container">
            <h2>About</h2>
        </div>
    </section>
        
    <section id="support" class="page-section">
        <div class="container">
            <h2>Support</h2>
        </div>
    </section>
        
    <section id="blog" class="page-section">
        <div class="container">
            <h2>Blog</h2>
        </div>
    </section>
        
    <section id="tools" class="page-section">
        <div class="container">
            <h2>Tools</h2>
        </div>
    </section>
        
    <section id="base" class="page-section">
        <div class="container">
            <h2>Base</h2>
        </div>
    </section>
        
    <section id="custom" class="page-section">
        <div class="container">
            <h2>Custom</h2>
        </div>
    </section>
        
    <section id="testimonials" class="page-section">
        <div class="container">
            <h2>Testimonials</h2>
        </div>
    </section>
        
    <section id="more" class="page-section">
        <div class="container">
            <h2>More</h2>
        </div>
    </section>
        

    <div id="scrollmenu">
      <div class="scroll-links-container">
          <a href="#home" class="link">Home</a>
          <a href="#news" class="link">News</a>
          <a href="#contact" class="link">Contact</a>
          <a href="#about" class="link">About</a>
          <a href="#support" class="link">Support</a>
          <a href="#blog" class="link">Blog</a>
          <a href="#tools" class="link">Tools</a>  
          <a href="#base" class="link">Base</a>
          <a href="#custom" class="link">Custom</a>
          <a href="#testimonials" class="link">Testimonials</a>
          <a href="#more" class="link">More</a>
      </div>
    </div>
        
    </wrapper>



body, html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 16px;
    background-color: white;
}

html {
    scroll-behavior: smooth;
}

wrapper {
    display: block;
    width: 360px;
    margin: 0 auto;
    background-color: black;
    padding-top: 20px;
}

h1 {
    font-family: sans-serif;
    font-size: 3.5rem;
    color: white;
    padding: 0px 20px;
}

h2 {
    font-family: sans-serif;
    font-size: 2.5rem;
    color: white;
}


section {
    width: 360px;
    background-color: transparent;
}

.container.heading {
    padding: 20px 20px 20px 20px;
}

.container {
    padding: 200px 40px 200px 40px;
}


div#scrollmenu {
    position: fixed;
    bottom: 0;
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    width: 360px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
    margin: 0;
}

div#scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 25px 25px;
    text-decoration: none;
}

div#scrollmenu a:hover {
    background-color: #777;
}

.active {
    background-color: #777;
}

.slide-about-left {
    transform: translateX(-300px);
    transition: transform 0.5s;
}




        $(window).scroll(function() {
   var hT = $('#about').offset().top,
       hH = $('#about').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       $(".scroll-links-container").addClass("slide-about-left");
   }
});


</body>
</html>