文章/答案/技术大牛

发布

社区首页 >问答首页 >使用滚动-行为:只对一个带有CSS的页面平滑

问使用滚动-行为:只对一个带有CSS的页面平滑
EN

Stack Overflow用户

提问于 2021-03-26 20:11:35

回答 2查看 1.8K关注 0票数 7

当我输入代码时

html {
    scroll-behavior: smooth;
}

我得到了我想要的锚链接的平滑效果。不过，我只希望这个效果适用于一个单一的网页，而不是我的整个网站。所以我认为这可能会奏效，用类作为我想要这个效果的单个页面的body标记。

.landing-page {
    scroll-behavior: smooth;
}

但是，一旦我这样做了，效果就不起作用了，尽管使用检查工具显示这个属性被应用到.landing-page中。为什么它不起作用，我下一步该尝试什么呢？

编辑:这是HTML。我试图让它，我平滑滚动到#how-it-works，只有那个锚。

<body class="landing-page welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
      </span>
    </div>
  </div>
</div>
</body>

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-26 20:21:30

好的，代码中的一个问题是body标记不支持平滑滚动，尝试将类或id添加到html标记中，或者只是在内联编码的页面上添加类或id，但这实际上取决于您将有哪些限制。

html.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.container {
 width: 200px;
 marging: auto;
}

<html class="landing-page">
<body class="welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        
      </span>
    </div>
  </div>
</div>
</body>
</html>

另一种方法是将代码放在div中而不是HTML中，但是您必须为它做一些变通。

.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: block;
  height: 100vh; // test with smaller heights
}

票数 3

Stack Overflow用户

发布于 2021-03-26 21:08:13

滚动行为CSS属性在由导航或CSSOM滚动API触发滚动时设置滚动框的行为。

当在根元素上指定此属性时，它将应用于视图端口。body viewport. 元素上指定的属性不会传播到viewport. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior。

所以你有两个选择。

或者指定一个CSS类，如

.平滑-滚动{滚动-行为:光滑；}

并将其放在特定页面的HTML标记上(推荐方式)。

使您的身体成为滚动元素：

主体{边距: 0；高度:100；溢出-y: auto；}

并将CSS类放在页面的主体上。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66823709

复制

相似问题

问使用滚动-行为:只对一个带有CSS的页面平滑
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用滚动-行为:只对一个带有CSS的页面平滑EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用滚动-行为:只对一个带有CSS的页面平滑
EN