在不使用溢出CSS的情况下滚动进度条移动？

Question

我有一个非常有趣的问题。 实际上，一切正常。

我有一个 div，当我在这个 div 上滚动时，位于页面顶部的进度条会在其中发生一些事件。

当我的光标在滚动时检测到我的 div 然后我的进度条 div 显示，否则它仍然隐藏。

所以最后我希望我的 div 上没有溢出，但是当我滚动窗口时，我的进度条会移动。

在这里，请查看我的代码，我们将不胜感激。

$('#slide').scroll(function () {
	var scroll        = $(this).scrollTop();
	var scroll_height = $(this).get(0).scrollHeight;
	var height        = $(this).height();
	var percent       = scroll / (scroll_height - height) * 100;

	$("#progressbar").attr('value', percent);
  });

  	$(window).scroll(function() {
		if(isOnScreen($("#slide"))){
			$("#progressbar").show();
			console.log("dikhgya");
		} else {
			$("#progressbar").hide();
			console.log("nhi");
		   }
		   
	});
	var para = document.createElement("Progress");
	para.setAttribute('id', 'progressbar');
	para.setAttribute('value', 0);
	para.setAttribute('max', 100);
	document.getElementById("slide").appendChild(para);

progress {
      	height: 6px;
    	top: 46px;
    	left: 0px;
    	width: 100%;
    	/* bottom: 1326px; */
    	position: fixed;
    	margin-left: -1px;
    	margin-top: -1px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div type="timeline" id="slide">
  <section>
    <header>Title one</header>
    <article> Content</article>
  </section>
   <section>
    <header>Title two</header>
    <article> Content</article>
  </section>
   <section>
    <header>Title three</header>
    <article> Content</article>
  </section>
   <section>
    <header>Title four</header>
    <article> Content</article>
  </section>
</div>

Answer 1

据我了解，您想要滚动页面但不为此显示滚动条，而是显示进度条。

我创建了一个小提琴 https://jsfiddle.net/xpvt214o/8059/

<div id="timeline-wrapper" >
    <div type="timeline" id="slide">
      <section>
        <header>Title one</header>
        <article> Content</article>
     </section>
   </div>
</div>

在 css 中，您必须将属性 overflow:hidden 添加到 timeline-wrapper 并将 overflow:auto 添加到 slide。然后将 padding-right:16px 添加到 slide 中，其中 16px 是基于 webkit 的浏览器中滚动条的宽度。

#timeline-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#slide {
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 16px;
}

在这个小提琴中，我删除了滚动条，滚动由进度条描绘。 希望这能回答你的问题！