为什么滚动行为：流畅不起作用但javascript window.scroll顺畅？

时间：2018-04-03 18:18:30

标签： javascript html css

我有一个向下滚动到导航元素的导航栏。导航栏在体内。

我的css：

body {
        scroll-behavior: smooth;
}

在页面中，我也使用了一些javascript。一个是带有以下功能的javascript导航到其他页面元素：

window.scroll({
    top : pos,
    left : 0,
    behavior : 'smooth'
});

使用Chrome时，当我调用javascript函数时，滚动很流畅。但是当我通过导航栏链接导航到锚点时，它并不顺畅。

有人会在乎解释我的原因吗？

同样使用Firefox，从导航栏和滚动条滚动javascript功能很流畅。我认为一件作品有点奇怪但不是另一件作品。

编辑：我的解决方法如下（vanilla JS /适用于所有现代浏览器）：

    let pos = document.querySelector(element).offsetTop;
    if ('scrollBehavior' in document.documentElement.style) { //Checks if browser supports scroll function
        window.scroll({
            top : pos,
            left : 0,
            behavior : 'smooth'
        });
    } else {
        smoothScrollTo(0, pos, 500); //polyfill below
    }

后备滚动功能：

window.smoothScrollTo = function(endX, endY, duration) {
        let startX = window.scrollX || window.pageXOffset,
        startY = window.scrollY || window.pageYOffset,
        distanceX = endX - startX,
        distanceY = endY - startY,
        startTime = new Date().getTime();

        // Easing function
        let easeInOutQuart = function(time, from, distance, duration) {
            if ((time /= duration / 2) < 1) return distance / 2 * time * time * time * time + from;
            return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
        };

        let timer = window.setInterval(function() {
            let time = new Date().getTime() - startTime,
            newX = easeInOutQuart(time, startX, distanceX, duration),
            newY = easeInOutQuart(time, startY, distanceY, duration);
            if (time >= duration) {
                window.clearInterval(timer);
            }
            window.scrollTo(newX, newY);
        }, 1000 / 60); // 60 fps
    };

6 个答案:

答案 0 :(得分：2)

也许你想尝试使用jQuery平滑滚动。我认为原生滚动可能并不总是支持平滑滚动。使用jQuery你会更安全。

$("html, body").animate({ scrollTop: 0 }, "slow");

如果您正在使用其他锚点，则需要确保它们可以防止默认跳跃和滚动。我也使用jQuery。

参考：https://css-tricks.com/snippets/jquery/smooth-scrolling/

答案 1 :(得分：2)

scroll-behavior: smooth在body元素（JSFiddle）上不起作用。

但是它可用于其他选择器，例如html（JSFiddle）。

您还可以尝试使用纯JavaScript解决方案（JSFiddle）：

function scrollToTop() {
  window.scrollTo({
    top: 1000,
    behavior: 'smooth'
  });
}

答案 2 :(得分：1)

已经有一段时间了，但是有些人在浏览器中禁用了JavaScript，所以我认为这不是最好的选择。添加：body {scroll-behavior: smooth;}的问题在于，除非将其添加到html中，否则它将无法正常工作。例如：

在body上：

body {
  scroll-behavior: smooth;
}

a {
  background-color: lightgray;
  padding: 10px 20px;
  color: black;
  right: 10px;
  margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>No Scroll Effect On Body</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate.

Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi.

Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam.

Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br />
<br />
<br />

<a href="#top">Go to top</a>
</body>
</html>

如您所见，如果在body上进行了设置，则无法工作。但是如果将其设置在html上，它将起作用：

html {
  scroll-behavior: smooth;
}

a {
  background-color: lightgray;
  padding: 10px 20px;
  color: black;
  right: 10px;
  margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>No Scroll Effect On Body</title>
</head>

<body>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a
  porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi.
  Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla
  nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc.
  Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In
  porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros
  ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus
  vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam
  urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas
  id sagittis enim, tempor tristique quam. Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare
  lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend
  lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci
  porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur
  diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget
  laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius
  sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla
  tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit
  amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed
  mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed
  sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam. Proin
  condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus
  vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et.
  Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <br />
  <br />
  <br />
  <a href="#top">Go to top</a> </body>

</html>

对此的好处是，它是跨浏览器的解决方案，因为找到禁用CSS的浏览器非常罕见。希望对您有所帮助。

答案 3 :(得分：0)

我不知道您是否仍然需要答案，但是我碰到了一篇文章，仅通过CSS即可为我修复该问题：https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

答案 4 :(得分：0)

这对我有用：

SELECT *
FROM (
    SELECT *        -- better enumerate the columns here than use "*"
    FROM table1 t1  -- table aliases make the query easier to write and read
    LEFT JOIN table2 t2 ON t1.ITEM_NO = t2.ITEM_NO 
    ORDER BY t1.Create_Date DESC 
    LIMIT 10
) t
ORDER BY price desc

答案 5 :(得分：-2)

enter code here


setInterval(myTimer, 1);     
var isTimerEnable = false;
var scroll_position = 0;
var getSelected_position =0;
var getCurrent_position =0;
var scroll_speed = 5;

function Current_Position(){
    getCurrent_position = window.pageYOffset;
}
function myTimer() {
    if(isTimerEnable == true){
        if(scroll_position < getSelected_position){
            scroll_position +=scroll_speed;
            getCurrent_position =scroll_position;
            window.scroll(0,scroll_position);
            if(scroll_position >= getSelected_position){
                isTimerEnable = false;
            } 
        }
        else{
            scroll_position -=scroll_speed;
            getCurrent_position =scroll_position;
            window.scroll(0,scroll_position);
            if(scroll_position <= getSelected_position){
                isTimerEnable = false;
            } 
        }
    }
   
}
//NOTE ASSIGN THE Y POSITION OF YOUR DIV 
function topNav_btn(setPosition){
    scroll_position = getCurrent_position;
    getSelected_position = setPosition;  
    isTimerEnable  =true;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>No Scroll Effect On Body</title>
</head>

<body>

  <button style="position:fixed; left:200px;" onclick="topNav_btn(0);">Go to form 1 </button>
  <button style="position:fixed; left:300px;" onclick="topNav_btn(450);">Go to form 2 </button>
  <button style="position:fixed; left:400px;" onclick="topNav_btn(900);">Go to form 3 </button>
   <div id="form1">  Form 1   </div>
   <br> <br> <br><br> <br> <br><br><br>  <br> <br> <br><br> <br> <br><br><br> 
   <br> <br> <br><br> <br> <br><br><br> 
  
  <div id="form2">  Form 2 </div> 
  
 <br> <br> <br><br> <br> <br><br><br>  <br> <br> <br><br> <br> <br><br><br> 
   <br> <br> <br><br> <br> <br><br><br> 
   
     <div id="form2">  Form 3 </div> 
  
 <br> <br> <br><br> <br> <br><br><br>  <br> <br> <br><br> <br> <br><br><br> 
   <br> <br> <br><br> <br> <br><br><br> 
 
    
    
   
    
      
     
 
     
     
 
  

     
 
  
  
  
  </body>

</html>

相关问题
最新问题