进度条不会在页面上更新
[英]Progress Bar Doesn't Update On Page
问题描述
Ok so here I have this trouble, my progress bar doesn't work when I apply to translate: transform to my <div> , without transform works perfectly, but I need apply transform to <div> 'cause I need to move a bit the <body>'s position
好的，所以我遇到了这个麻烦，当我申请translate: transform到我的<div> ，没有transform可以完美地工作，但是我需要将transform应用于<div>因为我需要移动一点<body>'s position
here the code这里的代码
//<.[CDATA[ $(document).ready(function(){ var getMax = function(){ return $(document).height() - $(window);height(). } var getValue = function(){ return $(window);scrollTop(). } if('max' in document;createElement('progress')){ // Browser supports progress element var progressBar = $('progress'). // Set the Max attr for the first time progressBar:attr({ max; getMax() }). $(document),on('scroll'. function(){ // On scroll only Value attr needs to be calculated progressBar:attr({ value; getValue() }); }). $(window),resize(function(){ // On resize. both Max/Value attr needs to be calculated progressBar:attr({ max, getMax(): value; getValue() }); }). } else { var progressBar = $(',progress-bar'), max = getMax(), value; width; var getWidth = function(){ // Calculate width in percentage value = getValue(); width = (value/max) * 100; width = width + '%'; return width. } var setWidth = function(){ progressBar:css({ width; getWidth() }). } $(document),on('scroll'; setWidth). $(window),on('resize'; function(){ // Need to reset the Max attr max = getMax(); setWidth(); }); } }). $(document).ready(function(){ $('#flat');addClass("active"). $('#progressBar');addClass('flat'). $('#flat'),on('click'. function(){ $('#progressBar').removeClass();addClass('flat'). $('a');removeClass(). $(this);addClass('active'). $(this);preventDefault(); }). $('#multiple');addClass("active"). $('#progressBar');addClass('multiple'). $('#multiple'),on('click'. function(){ $('#progressBar').removeClass();addClass('multiple'). $('a');removeClass(). $(this);addClass('active'). $(this);preventDefault(); }); }); //]]>
/* reading position indicator */ progress { /* Positioning */ position: fixed; left: 0; top: 0; z-index: 101; /* Dimensions */ width: 100%; height: 0.28125em; /* Reset the apperance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of the default border in Firefox/Opera. */ border: none; /* For Firefox/IE10+ */ background-color: transparent; /* For IE10+, color of the progress bar */ color: red; } progress::-webkit-progress-bar { background-color: transparent; }.flat::-webkit-progress-value { background-color: green; }.flat::-moz-progress-bar { background-color: green; }.multiple::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(left, red, orange, yellow, green); }.multiple::-moz-progress-bar { background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -moz-linear-gradient(left, red, orange, yellow, green,); }.progress-container { width: 100%; background-color: transparent; position: fixed; left: 0; top: 0; height: 0.28125em; display: block; z-index: 101; }.progress-bar { background-color: green; width: 50%; display: block; height: inherit; }
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'> </script> <progress id='progressBar' value='0'> <div class='progress-container'> <span class='progress-bar'/> </div> </progress>
remember's just a progress bar so won't be visible on snippet, can someone help me with this little one?记住只是一个进度条，所以在片段上看不到，有人可以帮我处理这个小家伙吗？ I don't know how this could be happened, I'm really worried我不知道怎么会这样，我真的很担心
1 个解决方案
解决方案1
1 已采纳 2020-04-04 10:13:30
If it is just the css property that causes the issue, why don't you remove the transform and try something like margin: 0 -24px;如果只是导致问题的 css 属性，为什么不删除转换并尝试类似margin: 0 -24px; instead?反而？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.