使用 javascript vanilla 从 dom 的元素水平滚动

Question

在这里我有一个小问题我在 javascript 有一点水平，我希望我的投资组合页面从 dom 中的一个位置水平滚动我应该怎么做这可能会使我在这里所做的一切变得复杂是我的投资组合： https ://portfolio-rdw.000webhostapp.com/

让你看看我想要什么，但我想在 javascript vanilla no jQuery 或其他只是 Js 中做到这一点，这是 css 代码成功做到这一点：（对不起我的英语我是法语）

 #container.box { width: 100vw; height: 100vh; display: inline-block; position: relative; } #container.box>div { width: 100px; height: 100px; font-size: 96px; color: #FFF; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; line-height: .7; font-weight: bold; } #container { overflow-y: scroll; overflow-x: hidden; transform: rotate(270deg) translateX(-100%); transform-origin: top left; background-color: #999; position: absolute; width: 100vh; height: 100vw; } #container2 { transform: rotate(90deg) translateY(-100vh); transform-origin: top left; white-space: nowrap; font-size: 0; }.one { background-color: #45CCFF; }.two { background-color: #49E83E; }.three { background-color: #EDDE05; }.four { background-color: #E84B30; }

Answer 1

您可以在 DOM 元素上使用scrollIntoView function 滚动到它。

我查看了您的网站结构，您可以执行以下操作。 请记住，为每个链接提供链接到部分 id 的href属性。

const navbar = document.querySelector('.navbar-nav');

navbar.addEventListener("click",function(e){
    if(e.target.tagName==="A"){
        e.preventDefault();
        try{
          const href = e.target.getAttribute("href");
          var section = document.querySelector(href);
          section.scrollIntoView({behavior: "smooth"});
        }catch(e){
          console.log(e)
        }
    }

})

希望这可以帮助！

Answer 2

事实上，我表达得很糟糕.这不是在“点击”事件中，而是通过滚动它在“体验”部分中发生变化，谢谢