Question

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

我有一个div，当我滚动这个div时，我的进度条会放在页面顶部移动。

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

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

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

＆＃13;

$('#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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

据我所知，您想要滚动页面但不显示滚动条，而是显示进度条。

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

lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        String selectedItem =(String)parent.getItemAtPosition(position);
        Toast.makeText(this, selectedItem, Toast.LENGTH_SHORT).show();  

        // For next Activity use Intent
        Intent intent = new Intent (this, SendDataActivityName.class);
        intent.putExtra("pass_data_id_name", selectedItem);
        startActivity(intent);
    }
});

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

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

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

在滚动进度条上移动而不使用溢出css？

1 个答案: