主页 / user-569286

Stepanov's questions

Martin Hope
Stepanov
Asked: 2023-10-10 05:30:13 +0000 UTC
  • 5

简而言之：我想实现一种替代系统滚动条的滚动条。

如果您在 FF 中运行代码，您可以清楚地看到一切似乎都正常工作，但是通过拖动滑块（DragElement函数）进行滚动非常慢；如果您没有为该事件分配实现滚动的尝试，则拖动滑块的-n-drop几乎可以完美地工作。

在 Chromium 上，使用滑块滚动就像我将其放入嵌套函数 ( closeDragElement ) 中一样，即 拖放按预期工作，但滚动仅在onmouseup完成后才起作用，而不是实时的。

为了图片的清晰和完整，我将保留其余的代码。

功能说明：

1.altScroll(e) ——通过鼠标滚轮实现滚动（FF专用，对隐藏滚动条不友好）

2.CorrectPos() - 类似“橡胶”滚动条的实现

3.DragElement(elmnt) - 主题本身（他们仍然这么说吗？）

4.const btnUp - 用于将页面滚动到开头的按钮（我监视了该函数，所以我不知道他们为什么将其写入常量，如果有人解释，我将不胜感激）

5.Ymonitor() - 监视器坐标清晰

6.SlideByScroll() - 好吧，如果我无法实现通过滑块滚动，那么通过滚动条滑动就可以了:))

从我的想法来看：似乎拖放和滚动无法几乎同时划分触发器和触发，因此滑块的行为很奇怪，但我不知道如何在它们之间设置延迟，我知道使用setTimeout是正在完成，但我不明白在哪里以及如何推动它。

UPD：总的来说，我还没有找到解决方案，但我想到最好将滑块位置与滚动位置在所有情况下和在一个方向上链接起来，即 仅滚动slider，要更改滑块的位置，请使用拖放操作和鼠标滚轮。现在，用鼠标滚轮滚动取决于滑块位置对沿 Y 轴滚动量的依赖，但以友好的方式，我希望滚动量仅取决于滑块的位置。当我朝这个方向努力时，我要求您给出与问题中的代码具体相关的答案。谢谢你！

帮助我弄清楚：我的工作方向正确吗？看来我离实现还差一行代码。我不是要求你为我写信，我知道这在这里不受欢迎，我要求你提供临别赠言或引导性问题。

预先感谢您的回答！

PS 在网站上的代码片段中，代码的工作方式与在浏览器中的工作方式不同（（

window.addEventListener("wheel", altScroll);
         
    function altScroll(e) {
      
     let delta = e.deltaY
     if (delta > 0) {
      window.scrollTo({
            top: window.scrollY+75,
            left: 0,
            behavior: 'auto'
          }); 
     } else { window.scrollTo({
            top: window.scrollY-75,
            left: 0,
            behavior: 'auto'
          });

     }     
    } 
window.addEventListener("load", CorrectPos());

    function CorrectPos() {

        let windowHeight = window.innerHeight;

        let SliderendsHeight = window.getComputedStyle(scrollbarTop, null).getPropertyValue("height");
        SliderendsHeight = parseFloat(SliderendsHeight);
        let minYvalue = ((windowHeight-(windowHeight*0.95))+SliderendsHeight*2)/2;
        minYvalue = minYvalue.toFixed(3);

        document.getElementById("scrollbarSlider").style.top = minYvalue+"px";

        let endsHeight = window.getComputedStyle(altScrollbarTop, null).getPropertyValue("height");
        endsHeight = parseFloat(endsHeight);
        endsHeight = endsHeight*2
        let allScrollHeight = windowHeight*0.95;
        let allScrollCenterHeight = allScrollHeight-endsHeight;
        let allScrollTop = (windowHeight - allScrollHeight)/2;

        document.getElementById("altScrollbarCenter").style.height = allScrollCenterHeight + "px";

        document.getElementById("altScrollbar").style.height = allScrollHeight + "px";

        document.getElementById("altScrollbar").style.top = allScrollTop + "px"; 


       addEventListener("scroll",() =>{

        let windowHeight = window.innerHeight;
        let endsHeight = window.getComputedStyle(altScrollbarTop, null).getPropertyValue("height");
        endsHeight = parseFloat(endsHeight);
        endsHeight = endsHeight*2
        let allScrollHeight = windowHeight*0.95;
        let allScrollCenterHeight = allScrollHeight-endsHeight;
        let allScrollTop = (windowHeight - allScrollHeight)/2;

        document.getElementById("altScrollbarCenter").style.height = allScrollCenterHeight + "px";

        document.getElementById("altScrollbar").style.height = allScrollHeight + "px";

        document.getElementById("altScrollbar").style.top = allScrollTop + "px";
          
        });        
        
      }
DragElement(document.getElementById("scrollbarSlider"));

      function DragElement(elmnt) {


      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

      elmnt.onmousedown = dragMouseDown;

      function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    let SliderRight = window.getComputedStyle(scrollbarSlider, null).getPropertyValue("right"); 
    SliderRight = parseFloat(SliderRight);

    let SliderHeight = window.getComputedStyle(scrollbarSlider, null).getPropertyValue("height"); 
    SliderHeight = parseFloat(SliderHeight);

    let fullField = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight, document.body.scrollHeight);

    let windowHeight = window.innerHeight;

    let pageScrollRange = fullField - windowHeight;

    let SliderendsHeight = window.getComputedStyle(scrollbarTop, null).getPropertyValue("height");
    SliderendsHeight = parseFloat(SliderendsHeight);
    SliderendsHeight - SliderendsHeight*2;
    let minYvalue = ((windowHeight-(windowHeight*0.95))+SliderendsHeight)/2;

    let scrollbarRange = windowHeight-minYvalue-SliderHeight;
    
    scrollbarRange = parseInt(scrollbarRange);
    minYvalue = minYvalue.toFixed(3);

    let getSliderPos = parseFloat(elmnt.style.top);

    if (getSliderPos<minYvalue) { 
     elmnt.style.top = minYvalue + "px"; 
     elmnt.style.right = SliderRight + "px";
      } else {
        if (getSliderPos>scrollbarRange) {
        elmnt.style.top = scrollbarRange + "px"; 
        elmnt.style.right = SliderRight + "px";
    }     else{
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; 
            elmnt.style.right = SliderRight + "px";
    }
   } 

  let getCurrentRange = getSliderPos*pageScrollRange/scrollbarRange;
  
  window.scrollTo({
            top: getCurrentRange,
            left: 0,
            behavior: 'auto'
          });                   
  }

  function closeDragElement() {


    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
  elmnt.ondragstart = function() {
  return false;
};
}

const btnUp = {
      el: document.querySelector('.arrowbg'),
      show() {
        
        this.el.classList.remove('hidebtn');
      },
      hide() {
        
        this.el.classList.add('hidebtn');
      },
      addEventListener() {
        
        window.addEventListener('scroll', () => {
          
          let scrollY = window.scrollY || document.documentElement.scrollTop;
          
          scrollY > 400 ? this.show() : this.hide();
        });
        document.querySelector('.arrowbg').onclick = () => {
          
          window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
          });
        }
      }
    }
    btnUp.addEventListener();
function Ymonitor(){

  let fF = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight, document.body.scrollHeight);


    document.getElementById('Ymntr').value = window.pageYOffset+";"+"\n"+fF+";"+"\n"+document.body.scrollWidth+";"+"\n"+"\n"+window.innerWidth+";"+"\n"+window.innerHeight+";";


    addEventListener('scroll', () =>{
    document.getElementById('Ymntr').value = window.pageYOffset+";"+"\n"+fF+";"+"\n"+document.body.scrollWidth+";"+"\n"+"\n"+window.innerWidth+";"+"\n"+window.innerHeight+";";
  });
 }

 window.addEventListener("load", Ymonitor());
window.addEventListener("load", SlideByScroll());


  function SlideByScroll() {
  
   addEventListener('scroll', () =>{

   let currentRange = window.pageYOffset;

   let fullField = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight, document.body.scrollHeight);

   let windowHeight = window.innerHeight;

   let pageScrollRange = fullField - windowHeight;

   let SliderendsHeight = window.getComputedStyle(scrollbarTop, null).getPropertyValue("height");
   SliderendsHeight = parseFloat(SliderendsHeight);
   let minYvalue = ((windowHeight-(windowHeight*0.95))+SliderendsHeight*2)/2;
   minYvalue = minYvalue.toFixed(3);

   let SliderHeight = window.getComputedStyle(scrollbarSlider, null).getPropertyValue("height");
   SliderHeight = parseFloat(SliderHeight);

   let scrollbarRange = windowHeight-minYvalue-SliderHeight;
   
   scrollbarRange = parseInt(scrollbarRange);

   let SliderPos = currentRange*scrollbarRange/pageScrollRange;

     if (SliderPos<minYvalue) {    
       SliderPos = minYvalue;
       } else {
           if (SliderPos>scrollbarRange) {
             SliderPos = scrollbarRange;
             } 
            } 

  document.getElementById("scrollbarSlider").style.top = SliderPos+"px";       

  
 });
}
body {
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
 overflow: hidden;
 min-width: ;
 min-height: 3000px;
 margin: 0px;
 background-color: rgba(30, 30, 30, 0.5);
 }
      

#altScrollbar {
  border: ;
  z-index: 1;
  position: fixed ;
  width: 15px; height:;
  right: 10px; top:;
  background-color: rgba(255, 255, 255, 0.0);
  }

  #altScrollbarTop {
  z-index: 1;
  width: 15px; height: 15px;
  right: 10px; top:;
  background-color: rgba(255, 255, 255, 0.2);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

  #altScrollbarCenter {
  border: ;  
  z-index: 1;
  width: 15px; height: ;
  right: 10px; top:;
  background-color: rgba(255, 255, 255, 0.2);
}

#altScrollbarBottom {
  z-index: 1;
  width: 15px; height: 15px;
  right: 10px; top:;
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

#scrollbarSlider {
  z-index: 3;
  -moz-user-select:none;
  user-select: none;
  position: fixed;
  width: 7px; height: 59px;
  right: 14px;  
  background-color: rgba(0, 0, 0, 0.0);
  cursor: pointer; 
}


 #scrollbarTop {
 width: 7px; height: 7px;
 background-color: rgba(0, 0, 0, 0.4);
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
}

#scrollbarCenter {
  
  -moz-user-select:none;
  user-select: none;
  width: 7px; height: 45px;  
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

 #scrollbarBottom {
  width: 7px; height: 7px;
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.arrowbg {

 fill-opacity: 0.4;
 transition: all 0.3s; 
 width: 80px; height: 80px;
 position: fixed;
 right: 35px;
 bottom: 35px; 
 cursor: pointer;

}

.arrowbg::before {
      content: "";
      width: 40px;
      height: 40px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
  }


.hidebtn{
  opacity: 0;
} 

.arrowbg:hover {
 fill-opacity: 0.55;
 width: 80px; height: 80px;
 position: fixed;
 right: 35px;
 bottom: 50px;
 

}


.Ymonitor {
    width: 100px; height: 100px;
    position: fixed;
    left: 30px;
    bottom: 35px;
}

.Ymonitor::before {
  content: "";
      width: 40px;
      height: 40px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
}

.Ymonitorindicator {
  outline: 1px solid #000;
  pointer-events: none;
  resize: none;
  width: 99px; height: 99px;
}
.Ymonitorindicator:focus {

    outline: none; 
   }
<!doctype html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>

  <head>

    <title>Учебное пространство</title>

  </head>

  <body>

    
<center><p><h1>Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку! Текст, чтобы видеть прокрутку!</h1></p></center> 

<div id="altScrollbar">
  <div id="altScrollbarTop"></div>
    <div  id="altScrollbarCenter">
    
       <div id="scrollbarSlider">
        <div id="scrollbarTop"></div>
          <div id="scrollbarCenter"></div>
        <div id="scrollbarBottom"></div>
      </div>

    </div>
  <div id="altScrollbarBottom"></div>
</div>
<div class="arrowbg hidebtn" > 

      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="80px" height="80px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 300 300"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#2B2A29;stroke-width:0.9;stroke-miterlimit:22.9256}
    .fil1 {fill:none}
    .fil0 {fill:#FEFEFE}
   ]]>
  </style>
 </defs>
 <g id="arrowUp">
   <circle cx="50%" cy="50%" r="150"  />
  
  <path class="fil0" d="M150 289.59c-77.1,0 -139.59,-62.49 -139.59,-139.59 0,-77.1 62.49,-139.59 139.59,-139.59 77.1,0 139.59,62.49 139.59,139.59 0,77.1 -62.49,139.59 -139.59,139.59zm148.68 -139.59c0,-82.11 -66.57,-148.68 -148.68,-148.68 -82.11,0 -148.68,66.57 -148.68,148.68 0,82.11 66.57,148.68 148.68,148.68 82.11,0 148.68,-66.57 148.68,-148.68z"/>
  <path class="fil0" d="M178.48 136.12c-3,25 -1,64 45,98 -87,1 -110,-38 -114,-98l-30 0c-6,0 -8,-2 0,-10l54 -55c7,-7 14,-7 20,0l55 55c8,8 6,10 0,10l-30 0z"/>
  <path class="fil1 str0" d="M-503.9 -364.45c0,-82.11 -66.57,-148.68 -148.68,-148.68 -82.11,0 -148.68,66.57 -148.68,148.68 0,82.12 66.57,148.68 148.68,148.68 82.11,0 148.68,-66.56 148.68,-148.68z"/>
  <path class="fil1 str0" d="M-554.48 -17.31c0,-77.09 -62.49,-139.59 -139.59,-139.59 -77.09,0 -139.59,62.5 -139.59,139.59 0,77.1 62.5,139.6 139.59,139.6 77.1,0 139.59,-62.5 139.59,-139.6z"/>
 </g>
</svg> 

  </div>
<div class="Ymonitor">
   
  <textarea class="Ymonitorindicator" id="Ymntr"></textarea>

 </div>
</body>

</html>

javascript