addEventListener scroll Uncaught TypeError: element.getBoundingClientRect is not a function

huangapple
go评论103阅读模式
英文:

addEventListener scroll Uncaught TypeError: element.getBoundingClientRect is not a function

问题

I'm trying to set up my code so it can detect if a certain section of my HTML is at the top of the viewport. I'm getting the error:

Uncaught TypeError: element.getBoundingClientRect is not a function

  1. const items = document.querySelectorAll('section');
  3. function isOnScreen(element, buffer) {
  4.   //buffer is optional and allows you to return true when  
  5.   //the element is going to appear to the screen  
  6.   buffer = typeof buffer === 'undefined' ? 0 : buffer;
  7.   // Get element's position in the viewport
  8.   const bounding = element.getBoundingClientRect();
  9.   // Check if element is in the viewport 
  10.   if (bounding.top >= buffer && bounding.left >= buffer &&
  11.     bounding.right <=
  12.     // fallback for browser compatibility 
  13.     ((window.innerWidth || document.documentElement.clientWidth) - buffer) &&
  14.     bounding.bottom <=
  15.     ((window.innerHeight || document.documentElement.clientHeight) - buffer)) {
  16.     return true
  17.     console.log(element);
  18.   } else {
  19.     return false;
  20.   };
  21. };
  23. document.addEventListener('scroll', function() {
  24.   for (item in items) {
  25.     isOnScreen(item);
  26.   };
  27. });

I'm new to all this stuff and don't know what I'm doing wrong. If anyone can point me in the right direction, I would greatly appreciate it.

Thank you,
Michael

英文:

I'm trying to set up my code so it can detect if a certain section of my HTML is at the top of the viewport. I'm getting the error:

Uncaught TypeError: element.getBoundingClientRect is not a function

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const items = document.querySelectorAll(&#39;section&#39;);
  3. function isOnScreen(element, buffer) {
  4.   //buffer is optional and allows you to return true when  
  5.   //the element is going to appear to the screen  
  6.   buffer = typeof buffer === &#39;undefined&#39; ? 0 : buffer;
  7.   // Get element&#39;s position in the viewport
  8.   const bounding = element.getBoundingClientRect();
  9.   // Check if element is in the viewport 
  10.   if (bounding.top &gt;= buffer &amp;&amp; bounding.left &gt;= buffer &amp;&amp;
  11.     bounding.right &lt;=
  12.     // fallback for browser compatibility 
  13.     ((window.innerWidth || document.documentElement.clientWidth) - buffer) &amp;&amp;
  14.     bounding.bottom &lt;=
  15.     ((window.innerHeight || document.documentElement.clientHeight) - buffer)) {
  16.     return true
  17.     console.log(element);
  18.   } else {
  19.     return false;
  20.   };
  21. };
  23. document.addEventListener(&#39;scroll&#39;, function() {
  24.   for (item in items) {
  25.     isOnScreen(item);
  26.   };
  27. });

<!-- language: lang-html -->

  1. &lt;body&gt;
  2.   &lt;!-- HTML Follows BEM naming conventions 
  3.   IDs are only used for sections to connect menu achors to sections --&gt;
  4.   &lt;header class=&quot;page__header&quot;&gt;
  5.     &lt;nav class=&quot;navbar__menu&quot;&gt;
  6.       &lt;!-- Navigation starts as empty UL that will be populated with JS --&gt;
  7.       &lt;ul id=&quot;navbar__list&quot;&gt;&lt;/ul&gt;
  8.     &lt;/nav&gt;
  9.   &lt;/header&gt;
  10.   &lt;main&gt;
  11.     &lt;header class=&quot;main__hero&quot;&gt;
  12.       &lt;h1&gt;Landing Page &lt;/h1&gt;
  13.     &lt;/header&gt;
  14.     &lt;!-- Each Section has an ID (used for the anchor) and 
  15.     a data attribute that will populate the li node.
  16.     Adding more sections will automatically populate nav.
  17.     The first section is set to active class by default --&gt;
  18.     &lt;section id=&quot;section1&quot; data-nav=&quot;Section 1&quot;&gt;
  19.       &lt;div class=&quot;landing__container&quot;&gt;
  20.         &lt;h2&gt;Section 1&lt;/h2&gt;
  21.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  22.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  23.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  25.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  26.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  27.       &lt;/div&gt;
  28.     &lt;/section&gt;
  29.     &lt;section id=&quot;section2&quot; data-nav=&quot;Section 2&quot;&gt;
  30.       &lt;div class=&quot;landing__container&quot;&gt;
  31.         &lt;h2&gt;Section 2&lt;/h2&gt;
  32.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  33.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  34.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  36.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  37.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  38.       &lt;/div&gt;
  39.     &lt;/section&gt;
  40.     &lt;section id=&quot;section3&quot; data-nav=&quot;Section 3&quot;&gt;
  41.       &lt;div class=&quot;landing__container&quot;&gt;
  42.         &lt;h2&gt;Section 3&lt;/h2&gt;
  43.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  44.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  45.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  47.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  48.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  49.       &lt;/div&gt;
  50.     &lt;/section&gt;
  51.   &lt;/main&gt;
  52.   &lt;footer class=&quot;page__footer&quot;&gt;
  53.     &lt;p&gt;&amp;copy Udacity&lt;/p&gt;
  54.   &lt;/footer&gt;
  56. &lt;/body&gt;

<!-- end snippet -->

I'm new to all this stuff and don't know what I'm doing wrong. If anyone can point me in the right direction I would greatly appreciate it.

Thank you,
Michael

答案1

得分: 2

以下是您要翻译的内容：

Tiny error :

for (item in items) : item 是一个 数字（在数组中的索引）。

for (item of items) : item 是数组中的实际元素。

  1. const items = document.querySelectorAll('section');
  3. function isOnScreen(element, buffer) {
  4.   // buffer 是可选的，允许在元素即将出现在屏幕上时返回 true
  5.   buffer = typeof buffer === 'undefined' ? 0 : buffer;
  6.   // 获取元素在视口中的位置
  7.   const bounding = element.getBoundingClientRect();
  8.   // 检查元素是否在视口中
  9.   if (bounding.top >= buffer && bounding.left >= buffer &&
  10.     bounding.right <=
  11.     // 浏览器兼容性的回退
  12.     ((window.innerWidth || document.documentElement.clientWidth) - buffer) &&
  13.     bounding.bottom <=
  14.     ((window.innerHeight || document.documentElement.clientHeight) - buffer)) {
  15.     return true
  16.     console.log(element);
  17.   } else {
  18.     return false;
  19.   };
  20. };
  22. document.addEventListener('scroll', function() {
  23.   for (item of items) {
  24.     isOnScreen(item);
  25.   };
  26. });
  1. <body>
  2.   <!-- HTML 遵循 BEM 命名约定
  3.   ID 仅用于将菜单锚点连接到部分的部分 -->
  4.   <header class="page__header">
  5.     <nav class="navbar__menu">
  6.       <!-- 导航从空的 UL 开始，将由 JS 填充 -->
  7.       <ul id="navbar__list"></ul>
  8.     </nav>
  9.   </header>
  10.   <main>
  11.     <header class="main__hero">
  12.       <h1>Landing Page </h1>
  13.     </header>
  14.     <!-- 每个部分都有一个 ID（用于锚点）和
  15.     将填充 li 节点的数据属性。
  16.     添加更多部分将自动填充导航。
  17.     默认情况下，第一个部分设置为活动类 -->
  18.     <section id="section1" data-nav="Section 1">
  19.       <div class="landing__container">
  20.         <h2>Section 1</h2>
  21.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  22.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  23.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
  25.         <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  26.           tortor, eget elementum tortor mollis non.</p>
  27.       </div>
  28.     </section>
  29.     <section id="section2" data-nav="Section 2">
  30.       <div class="landing__container">
  31.         <h2>Section 2</h2>
  32.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  33.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  34.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
  36.         <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  37.           tortor, eget elementum tortor mollis non.</p>
  38.       </div>
  39.     </section>
  40.     <section id="section3" data-nav="Section 3">
  41.       <div class="landing__container">
  42.         <h2>Section 3</h2>
  43.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  44.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  45.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
  47.         <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  48.           tortor, eget elementum tortor mollis non.</p>
  49.       </div>
  50.     </section>
  51.   </main>
  52.   <footer class="page__footer">
  53.     <p>&copy Udacity</p>
  54.   </footer>
  55. </body>
英文:

Tiny error :

for (item in items) : item is a number (the index in the array).

for (item of items) : item is the actual element in the array.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const items = document.querySelectorAll(&#39;section&#39;);
  2. function isOnScreen(element, buffer) {
  3. //buffer is optional and allows you to return true when  
  4. //the element is going to appear to the screen  
  5. buffer = typeof buffer === &#39;undefined&#39; ? 0 : buffer;
  6. // Get element&#39;s position in the viewport
  7. const bounding = element.getBoundingClientRect();
  8. // Check if element is in the viewport 
  9. if (bounding.top &gt;= buffer &amp;&amp; bounding.left &gt;= buffer &amp;&amp;
  10. bounding.right &lt;=
  11. // fallback for browser compatibility 
  12. ((window.innerWidth || document.documentElement.clientWidth) - buffer) &amp;&amp;
  13. bounding.bottom &lt;=
  14. ((window.innerHeight || document.documentElement.clientHeight) - buffer)) {
  15. return true
  16. console.log(element);
  17. } else {
  18. return false;
  19. };
  20. };
  21. document.addEventListener(&#39;scroll&#39;, function() {
  22. for (item of items) {
  23. isOnScreen(item);
  24. };
  25. });

<!-- language: lang-html -->

  1. &lt;body&gt;
  2.   &lt;!-- HTML Follows BEM naming conventions 
  3.   IDs are only used for sections to connect menu achors to sections --&gt;
  4.   &lt;header class=&quot;page__header&quot;&gt;
  5.     &lt;nav class=&quot;navbar__menu&quot;&gt;
  6.       &lt;!-- Navigation starts as empty UL that will be populated with JS --&gt;
  7.       &lt;ul id=&quot;navbar__list&quot;&gt;&lt;/ul&gt;
  8.     &lt;/nav&gt;
  9.   &lt;/header&gt;
  10.   &lt;main&gt;
  11.     &lt;header class=&quot;main__hero&quot;&gt;
  12.       &lt;h1&gt;Landing Page &lt;/h1&gt;
  13.     &lt;/header&gt;
  14.     &lt;!-- Each Section has an ID (used for the anchor) and 
  15.     a data attribute that will populate the li node.
  16.     Adding more sections will automatically populate nav.
  17.     The first section is set to active class by default --&gt;
  18.     &lt;section id=&quot;section1&quot; data-nav=&quot;Section 1&quot;&gt;
  19.       &lt;div class=&quot;landing__container&quot;&gt;
  20.         &lt;h2&gt;Section 1&lt;/h2&gt;
  21.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  22.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  23.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  25.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  26.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  27.       &lt;/div&gt;
  28.     &lt;/section&gt;
  29.     &lt;section id=&quot;section2&quot; data-nav=&quot;Section 2&quot;&gt;
  30.       &lt;div class=&quot;landing__container&quot;&gt;
  31.         &lt;h2&gt;Section 2&lt;/h2&gt;
  32.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  33.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  34.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  36.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  37.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  38.       &lt;/div&gt;
  39.     &lt;/section&gt;
  40.     &lt;section id=&quot;section3&quot; data-nav=&quot;Section 3&quot;&gt;
  41.       &lt;div class=&quot;landing__container&quot;&gt;
  42.         &lt;h2&gt;Section 3&lt;/h2&gt;
  43.         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
  44.           Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
  45.           porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.&lt;/p&gt;
  47.         &lt;p&gt;Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
  48.           tortor, eget elementum tortor mollis non.&lt;/p&gt;
  49.       &lt;/div&gt;
  50.     &lt;/section&gt;
  51.   &lt;/main&gt;
  52.   &lt;footer class=&quot;page__footer&quot;&gt;
  53.     &lt;p&gt;&amp;copy Udacity&lt;/p&gt;
  54.   &lt;/footer&gt;
  56. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月3日 23:32:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/59581240.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定