覆盖javascript以消除闪烁

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了覆盖javascript以消除闪烁相关的知识，希望对你有一定的参考价值。

我下面有两个javascript片段。他们都做他们打算做的工作，除了现在点击第二个片段中的.info触发按照第一个片段添加到正文中的类，导致不必要的闪烁。是否有可能使第二个片段不添加或删除类？或者甚至将两者结合起来以避免这个问题？在此先感谢您的帮助！

我在下面添加了完整的代码。如您所见，如果单击其中一个红色方块而不向下滚动，则没有闪烁。向下滚动并单击它们会出现闪烁。

$(window).scroll(function () {
	    var elem = $('#object');

	    var header_height = (window.innerWidth <= 999) ? 50 : 100;
		var header_top 		= elem.offset().top;
		var current_top		= $(this).scrollTop();

	    if (current_top > header_height && !elem.hasClass('fixed-object'))
		{
	    	elem.addClass('fixed-object');
			$('body').addClass('fixed-padding');
	    }
	    else if(current_top <= header_height && elem.hasClass('fixed-object'))
		{
	    	elem.removeClass('fixed-object');
			$('body').removeClass('fixed-padding');
		}
	});
@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}
body {
	background: #F4F5F9;
}
.clear {
	clear: both;
}

/*------------------------------------*
    STRUCTURE
*------------------------------------*/
.wrapper {
	max-width: 1020px;
	margin: 0 auto;
}
/*------------------------------------*
    MAIN OBJECT DETAILS AREA
*------------------------------------*/
section#object, section#comparison {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 10px 30px 0 rgba(0,0,0,0.05);
}
section#object {
	min-height: 200px;
	border: 1px solid #000;
}
.fixed-object {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	width: 1020px;
	margin: 0 auto;
	border-radius: 0;
}
section#object {
	height:209px;
	transition: height 0.2s, width 0.2s;
}
/*------------------------------------*
    CONTENT AREA
*------------------------------------*/ 
.info {
	width: 17px;
	height: 17px;
	background: #ff0000;
	display: inline-block;
	text-indent: 999999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
.info:hover {
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
.info:active, .info:focus {
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
.infobox {
    background: #FFF;
    border: 1px solid #000;
	width:300px;
	z-index: 99;
	border-radius: 2px;
	padding: 8px 10px;
}
.infobox:after, .infobox:before {
	top: 100%;
	left: 80%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.infobox:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 5px;
	margin-left: -5px;
}
.infobox:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000;
	border-width: 6px;
	margin-left: -6px;
}
.infobox p {
	font-size: 11px;
	display: inline-block !Important;
    white-space: normal;
	text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="bug_flicker.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style type="text/css">
.lightbox, .infobox {
	display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
<!--/ HEADER-->
<main>
  <div class="wrapper">
  	<!--MAIN OBJECT-->
    <section id="object">
    </section>
    <!--/ MAIN OBJECT-->
    <!--CONTENT-->
    <section id="comparison">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin.  <a href="#" class="info LB2">Läs mer</a><div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.

Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.

Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.

Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.

Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
 <a href="#" class="info LB4">Läs mer</a><div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.

Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.

Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
 <a href="#" class="info LB5">Läs mer</a><div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.

Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.

Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.

Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.

Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.

Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.

Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.

Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.

Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.

Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.

Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
    </section>
    <!--/ CONTENT-->
  </div>
</main>
</body>
<script>
$('.infobox').hide();
$('a.info').click(function() {
    console.log($(this).index('a'));
    var $div = $('.infobox').eq($(this).index('a.info'));
    $div.toggle();
    $('.infobox').not($div).hide();
});
</script>
<script>
$(document).ready(function() {
    $(".info").click(function(event){
        $('html, body').animate({scrollTop: '+=0px'}, 1);
    });
});
</script>
</html>

$(window).scroll(function() {
  var elem = $('#object');

  var header_height = (window.innerWidth <= 999) ? 50 : 100;
  var header_top = elem.offset().top;
  var current_top = $(this).scrollTop();

  if (current_top > header_height && !elem.hasClass('fixed-object')) {
    elem.addClass('fixed-object');
    $('body').addClass('fixed-padding');
  } else if (current_top <= header_height && elem.hasClass('fixed-object')) {
    elem.removeClass('fixed-object');
    $('body').removeClass('fixed-padding');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
  $(".info").click(function(event) {
    $('html, body').animate({
      scrollTop: '+=0px'
    }, 1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
答案

你想使用.preventDefault()。像这样：

$(document).ready(function() {
  $(".info").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: '+=0px'
    }, 1);
  });
});

以上是关于覆盖javascript以消除闪烁的主要内容，如果未能解决你的问题，请参考以下文章

如何消除java动画闪烁

消除无样式内容的闪烁

java 双缓冲，消除闪烁 的问题

调整窗口大小时是不是可以完全消除闪烁？

利用定时器0模式1中断消除4位数码管动态显示闪烁问题的项目工程

如何消除TPaintBox右边缘的闪烁（例如调整大小时）