标签: js-scrollto

我尝试了几种向表格添加滚动的方法，但只有一种方法可以正常工作。它们之间有什么不同？

第一的：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView();", Element);

第二：

WebElement element1 = driver.findElement(By.id("scrolled_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element1);

第三：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0,1000)");

第四：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

当我有一个内部.sections包含多个.section元素的容器并设置滚动捕捉时，只有当我为该部分指定 100vh 的固定高度时，它才会起作用。如果没有高度，滚动捕捉将不起作用。这很好，除了没有固定高度，scrollTo工作正常，当我将高度添加到该部分时，scrollTo不再工作。

这是一个例子。height: 100vh;您可以在CSS 中注释掉该行.section，然后看到单击任意位置都会向下滚动到第 3 部分，但打开高度后，它不会滚动。

我尝试过console.log它滚动到的位置并且它是正确的，但滚动实际上从未发生。关于为什么这没有按照我想要的方式运行有什么想法吗？

注意：我在最新的 Chrome 中看到了这种行为。我还没有测试过其他浏览器。

// Click on document to scroll to section 3
document.body.onclick = function() {
    console.log('SCROLLING...');
    const el = document.getElementById('s3');
    const pos = el.getBoundingClientRect();
    window.scrollTo(0, pos.top); 
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
.sections {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /**
     * Adding the below line breaks …

页面加载后，我\xe2\x80\x99d 喜欢使用 Intersection Observer API 来观察元素 (addonCard)，以了解该元素是否完全可见。如果该元素不可见或部分可见，我希望该元素滚动到完全可见。如果 it\xe2\x80\x99s 已经完全可见，我希望该元素停止被观察。根据我的理解，您可以通过将阈值属性设置为 1 来检查完全可见性。但是，下面的我的实现不起作用（无论元素是否完全可见，它都会滚动）：

let addonCard = this.querySelector(`[addon-id="${param}"]`);\nlet observer = new IntersectionObserver(\n  (entries, observer) => {\n    entries.forEach(entry => {\n      if (entry.intersectionRatio != 1) {\n        let stickyHeaderHeight = document.querySelector(\n          "#page-header > .sticky-container"\n        ).offsetHeight;\n        let topOfTarget = entry.target.offsetTop - stickyHeaderHeight;\n        window.scrollTo({\n          top: topOfTarget,\n          behavior: "smooth"\n        });\n      } else {\n        observer.unobserve(entry.target);\n      }\n    });\n  }, {\n    threshold: 1,\n  }\n);\nobserver.observe(addonCard);\n

有人可以解释为什么这个实现不起作用以及我如何让它起作用吗？为什么entry.intersectionRatio从0开始永远不会改变？

预期行为：如果不完全可见，addonCard 应滚动到完全可见。如果它已经完全可见，则不应进行滚动。

实际行为：无论 addonCard 是否完全可见，都会发生滚动。

我的页面上有一个scrollTo 函数，当您单击特定按钮时，您会滚动到具有唯一ID 的部分。

问题是我对网站上的图像使用延迟加载，因此，这将导致 ScrollTo 由于延迟加载的图像而在页面中途停止。

毕竟，图像已加载，我再次单击按钮，它工作得很好。

我的延迟加载代码：

(() => {
    const runLazy = () => {
        let images = [...document.querySelectorAll('[data-lazy]')];

        const settings = {
            rootMargin: '0px',
            threshold: 0.02
        };

        let observer = new IntersectionObserver((imageEntites) => {
            imageEntites.forEach((image) => {
                if (image.isIntersecting) {
                    observer.unobserve(image.target);
                    image.target.src = image.target.dataset.lazy;
                    image.target.onload = () =>
                        image.target.classList.add('loaded');
                }
            });
        }, settings);

        images.forEach((image) => observer.observe(image));
    };

    runLazy();

})();

我的滚动到代码：

(() => {
    document.querySelectorAll('a[href^="#"]').forEach((elem) => {
        elem.addEventListener('click', (e) => {
            e.preventDefault();
            let block = document.querySelector(elem.getAttribute('href')),
                offset = …

如果在表单中单击提交按钮，如果存在错误，它应该自动滚动到第一个验证错误。我读过可以使用“scrolltoview”来实现此目的，但我不知道具体如何操作。

我已经尝试过使用简单的 ScrollTo (0.0) 来在出现错误时简单地向上滚动，并且效果完美。然而，这不是我想要的解决方案。

< script >
  ...
  let name = 'm-form-user';
export default {
  name: name,
  mixins: [baseForm],
  props: {
    name: {
      type: String,
      default: name
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'create',
      validator: function(value) {
        return ['edit', 'create'].indexOf(value) !== -1
      }
    },
  },
  data: () => ({
    form: {
      firstName: '',
      lastName: '',
      position: '',
      email: '',
      mobile: '',
      roles: []
    }
  }),
  async created() {
    if (!this.isCreationForm && this.$route.params.id) …