我有一个页面,其中一个滚动条包含从数据库动态生成的带有div的表行。每个表行就像一个链接,有点像你在视频播放器旁边看到的YouTube播放列表。

当用户访问页面时,他们所在的选项应该会转到滚动div的顶部。这个功能正在工作。问题是,这有点太过分了。比如他们的选项高了10像素。因此,页面被访问,url被用来识别选择了哪个选项,然后将该选项滚动到滚动div的顶部。注意:这不是窗口的滚动条,这是一个带有滚动条的div。

我正在使用这段代码,使它移动选中的选项到div的顶部:

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

它将它移动到div的顶部,但大约10个像素太高了。 有人知道怎么解决吗?


当前回答

我有这个,它对我非常有效:

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

希望能有所帮助。

其他回答

我添加这些css技巧给那些没有解决这个问题的解决方案:

#myDiv::before {
  display: block;
  content: " ";
  margin-top: -90px; // adjust this with your header height
  height: 90px; // adjust this with your header height
  visibility: hidden;
}

解决方案,如果你是使用离子电容器,角材料,并需要支持iOS 11。

                document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

关键是滚动到父节点的父节点,也就是输入的包装器。这个包装器包含输入的标签,该标签现在不再被切断。

如果你只需要支持iOS 14,“block”中心参数实际上是有效的,所以这是足够的:

                document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

基于之前的答案,我在一个Angular5项目中这样做。

开始:

// el.scrollIntoView(true);
el.scrollIntoView({
   behavior: 'smooth',
   block: 'start'
});
window.scrollBy(0, -10); 

但这样会产生一些问题,需要为scrollBy()设置timeout,如下所示:

//window.scrollBy(0,-10);
setTimeout(() => {
  window.scrollBy(0,-10)
  }, 500);

它在MSIE11和Chrome 68+中工作完美。我没有在FF测试过。500毫秒是我敢说的最短延迟。向下走有时会失败,因为平滑的滚动还没有完成。根据您自己的项目进行调整。

+1到Fred727为这个简单而有效的解决方案。

UPD:我已经创建了一个npm包,它比下面的解决方案更好,更容易使用。

我的smoothScroll函数

我采用了Steve Banton的出色解决方案,并编写了一个函数,使其使用起来更方便。使用window.scroll()甚至window.scrollBy()会更容易,因为我以前尝试过,但这两个有一些问题:

一切都变成垃圾后,使用他们与平稳的行为。 你无论如何都不能阻止他们,必须等到卷轴的结尾。 希望我的函数对你们有用。此外,还有一个轻量级的填充程序,可以在Safari甚至IE中运行。

下面是代码

照搬就行,想怎么搞就怎么搞。

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

const prepareSmoothScroll = linkEl => {
  const EXTRA_OFFSET = 0;

  const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
  const blockOption = linkEl.dataset.smoothScrollBlock || 'start';

  if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
    const anchorEl = document.createElement('div');

    destinationEl.setAttribute('style', 'position: relative;');
    anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);

    destinationEl.appendChild(anchorEl);

    linkEl.addEventListener('click', () => {
      anchorEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }

  if (blockOption === 'center' || !EXTRA_OFFSET) {
    linkEl.addEventListener('click', () => {
      destinationEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }
};

export const activateSmoothScroll = () => {
  const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];

  linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};

要创建一个link元素,只需添加以下data属性:

data-smooth-scroll-to="element-id"

还可以将另一个属性设置为加法

data-smooth-scroll-block="center"

它表示scrollIntoView()函数的块选项。默认为start。在MDN上阅读更多。

最后

根据您的需要调整平滑滚动功能。

例如,如果你有一些固定的标题(或者我用单词masthead来称呼它),你可以这样做:

const mastheadEl = document.querySelector(someMastheadSelector);

// and add it's height to the EXTRA_OFFSET variable

const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;

如果你没有这样的情况,那就删除它,为什么不:-D。

把我的解决方案留在这里,以防有人想达到和我一样的目标。

在我的例子中,错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说,页面有点长,在手机上则更长。)

我使用下面的代码片段将错误或通知滚动到视图中。

requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end', behavior: 'smooth' }) );

Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动,我添加了相同的替换。

从本质上讲,它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。