ChatGPT写的js实现文字超出范围自动横向滚动代码无效，问题在哪？

Chatbot写的js实现文字超出范围自动横向滚动代码，让chatbot验证可行性它说没问题，但自己使用却无法实现，请各位看看问题在哪


html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
      #wrapper {
        width: 20%;
        overflow: hidden;
        background-color: antiquewhite;
      }
      #content {
        white-space: nowrap;
        background-color: aquamarine;
      }
    style>
  head>
  <body>
    <div id="wrapper">
      <div id="content">
        qwfwqfqwfwfgqwgqgwwadwdafwafwdwadwadawfwfafwfawfwgwqgdwa
      div>
    div>
    <script>
      function autoScroll() {
        var wrapper = document.getElementById('wrapper');
        var content = document.getElementById('content');
        var wrapperWidth = wrapper.offsetWidth;
        var contentWidth = content.offsetWidth;
    if (contentWidth > wrapperWidth) {
      var speed = 50; // 滚动速度
      var delay = 2000; // 滚动间隔
      var position = 0;
      
      function scroll() {
        position += speed;
        
        if (position > contentWidth - wrapperWidth) {
          position = 0;
        }
        
        content.style.transform = 'translateX(' + -position + 'px)';
        requestAnimationFrame(scroll);
      }
      
      setTimeout(function() {
        requestAnimationFrame(scroll);
      }, delay);
    }
  }
  
  window.onload = autoScroll;
script>
 
  body>
html>

你再让它改一下就好了

wrapperWidth，contentWidth 都是304 相等的根本没执行里面的东西。scrollWidth 是滚动区域宽度，包括隐藏部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            width: 20%;
            overflow: hidden;
            background-color: antiquewhite;
        }

        #content {
            width: 100%;
            white-space: nowrap;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="content">
            qwfwqfqwfwfgqwgqgwwadwdafwafwdwadwadawfwfafwfawfwgwqgdwa6666666666666666666666666666666666666666
        </div>
    </div>
    <script>
        function autoScroll() {
            var wrapper = document.getElementById('wrapper');
            var content = document.getElementById('content');
            console.log(wrapper.style,content.style)
            var wrapperWidth = wrapper.offsetWidth;
            var contentWidth = content.scrollWidth;
           
            console.log(wrapperWidth,contentWidth)
          
            if (contentWidth >wrapperWidth) {
                var speed = 0.5; // 滚动速度
                var delay = 2000; // 滚动间隔
                var position = 0;
              
                function scroll() {
                    
                    position += speed;
                   
                    if (position > contentWidth - wrapperWidth) {
                        position = 0;
                    }
                       
                    content.style.transform = 'translateX(' + -position + 'px)';
                   // console.log(content,position)
                    requestAnimationFrame(scroll);
                }
               
                setTimeout(function () {
                    requestAnimationFrame(scroll);
                }, delay);
            }
        }
        autoScroll()
        // window.onload=function(){
        //     autoScroll()
        // }
     
    </script>

</body>

</html>