如何防止滚动效果使我的屏幕在滚动时闪烁 [英] How to prevent scroll effect from making my screen flicker on scroll

问题描述

到目前为止，在使用scrollTo函数时，使用chrome和ff造成了令人讨厌的故障?有人知道如何防止这种情况发生吗?
实时代码

HTML

 <ul class="wrapper">
    <li class="listItem"><img src="asset/img/logo.png" ></li>
    <li class="listItem"><a onclick="scrollTo('#container',500);" href="#">Company</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('.flexslider-container',500);" href="#">Service</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#map',500);" href="#">Map</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#footer',500);" href="#">Contact</a></li>
    <li class="listItem">
      <p>250-610-9100</p>
    </li>
  </ul>

SCRIPT

<script type="text/javascript">
function scrollTo(o, s) {
    var d = $(o).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: d
    }, s);
}
</script>

解决方案

您应该通过.on()附加事件，而不是将代码插入onclick属性.

(更多)适当的解决方案是为您提供链接class:

<a href="..." class="menu-link">...</a>

然后是一些精美的data属性:

<a href="..." class="menu-link" data-target="#container" data-duration="500">...</a>

然后在您的代码中添加以下内容:

$(document).ready(function() {
  $('.menu-link').on('click', function(event) {
    event.preventDefault();  // <---- This is the magic stuff

    scrollTo($(this).data('target'), $(this).data('duration'));
  });
});

基本上，您可以为元素赋予特殊的属性，这些属性可以使用jQuery的.data()函数读取.然后，不向每个链接添加函数调用，而是将一个魔术函数附加到它们的全部上.

---

如果要保留当前代码(ehh)，只需在每个onclick属性的末尾添加return false;:

<a onclick="scrollTo('.flexslider-container',300);return false;" href="#">Service</a>

这可以防止发生默认操作(滚动到页面顶部).

我推荐我的第一个解决方案.如果仅将jQuery的潜力发挥到三分之一，就不会对jQuery造成任何伤害.

using chrome and ff so far have made a nasty glitch when using scrollTo function? anyone know how to prevent this from happening?
Live Code

HTML

 <ul class="wrapper">
    <li class="listItem"><img src="asset/img/logo.png" ></li>
    <li class="listItem"><a onclick="scrollTo('#container',500);" href="#">Company</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('.flexslider-container',500);" href="#">Service</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#map',500);" href="#">Map</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#footer',500);" href="#">Contact</a></li>
    <li class="listItem">
      <p>250-610-9100</p>
    </li>
  </ul>

SCRIPT

<script type="text/javascript">
function scrollTo(o, s) {
    var d = $(o).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: d
    }, s);
}
</script>

解决方案

You should be attaching events via .on(), not shoving code into the onclick attribute.

The (more) proper solution is to give you links a class:

<a href="..." class="menu-link">...</a>

And then some fancy data attributes:

<a href="..." class="menu-link" data-target="#container" data-duration="500">...</a>

And in your code, add this:

$(document).ready(function() {
  $('.menu-link').on('click', function(event) {
    event.preventDefault();  // <---- This is the magic stuff

    scrollTo($(this).data('target'), $(this).data('duration'));
  });
});

Basically, you give your elements special attributes that can be read with jQuery's .data() function. Then, instead of adding a function call to each link, you attach one magic function to all of them.

---

If you want to keep your current code (ehh), just add return false; at the end of every onclick attribute:

<a onclick="scrollTo('.flexslider-container',300);return false;" href="#">Service</a>

This prevents the default action from occurring (scrolling to the top of the page).

I recommend my first solution. You aren't doing jQuery any justice if you are only using it to a third of its potential.

这篇关于如何防止滚动效果使我的屏幕在滚动时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！