javascript 在悬停滚动页面上（否 jQuery）

Question

我试图将鼠标悬停在按钮上并缓慢触发页面滚动。不滚动到 ID，而是在悬停时缓慢滚动页面，当悬停时停止滚动。

Answer 1

我不确定是否理解您的要求，也许您需要这样的东西：

let elem = document.querySelector('#myElem');
let interval;
let maxScrollHeight = elem.scrollHeight - elem.clientHeight;
elem.addEventListener('mouseenter', function() {  
  interval = setInterval(function() {
    elem.scroll(0, elem.scrollTop += 10);
    // This part of code is for replay
    if (elem.scrollTop >= maxScrollHeight) {
      elem.scroll(0, 1);
    }
  }, 100);
});
elem.addEventListener('mouseleave', function() {
  clearInterval(interval);
});

p {
  max-height: 100px;
  max-width: 100px;
  overflow: scroll;
}

<p id="myElem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

一个简单的解决方案可能是使用带有 setTimeout() 方法的计时器函数，使用具有 行为的 window.scroll 函数：'smooth' 在对象参数中。

var scrollStep=10,
 scrollTimer=null


  
function scrollSlowly(yDisplacement){
   if(scrollTimer!=null)clearTimeout(scrollTimer);
    
    scrollTimer = setTimeout(function(){
     window.scroll({
       top:window.scrollY+yDisplacement,
        left:0,
        behavior: 'smooth'
        })
      scrollSlowly(yDisplacement)
    }, 100);
  }
  
document.getElementById('up').addEventListener('mouseenter',function(evt){
   scrollSlowly(-scrollStep)
})
  
document.getElementById('up').addEventListener('mouseleave',function(evt){
   if(scrollTimer!=null)clearTimeout(scrollTimer);
})
  
document.getElementById('down').addEventListener('mouseenter',function(evt){
   scrollSlowly(scrollStep)
})
  
document.getElementById('down').addEventListener('mouseleave',function(evt){
   if(scrollTimer!=null)clearTimeout(scrollTimer);
})

.toolbar{
  position:fixed;
  top:0.5em;
  left:0.5em;
}
body{
  padding:2em;
}

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a est sit amet nisi tempus feugiat at quis felis. Aenean sit amet pretium lectus, non faucibus tortor. Suspendisse potenti. Aenean posuere lorem in ultricies malesuada. Cras vulputate tincidunt augue, in vulputate lacus iaculis id. Vestibulum et neque sed quam vestibulum laoreet in eget nunc. Suspendisse potenti.
</p>

<p>
Suspendisse molestie pretium suscipit. Morbi vitae dictum neque. Nullam a purus eu tortor iaculis eleifend nec eget augue. Maecenas bibendum neque vitae felis tincidunt laoreet. Nunc faucibus ligula sed tellus luctus porttitor sed a leo. Vivamus feugiat bibendum neque in consectetur. Integer dignissim tristique augue sed fermentum. Curabitur id feugiat tortor.
</p>

<p>
Sed ligula massa, sollicitudin ac feugiat non, elementum in augue. Pellentesque vel nibh at erat lobortis volutpat. Nunc ex leo, pretium ut egestas sit amet, scelerisque eleifend dolor. Proin dictum, odio non semper viverra, leo leo cursus nunc, ac varius neque diam vitae metus. Quisque id mi convallis, lobortis massa eget, posuere dolor. Aliquam magna dolor, malesuada id ullamcorper vel, rutrum non orci. Fusce rutrum placerat risus, eget molestie massa malesuada et. Duis rhoncus vestibulum turpis. Nullam gravida id est at posuere. Sed vel cursus tortor, quis rutrum leo. Nulla id nibh quis tellus fringilla mattis quis vel lorem. Sed accumsan magna nunc, ut tempus leo venenatis in. Mauris semper tortor a viverra tempus.
Sed nec orci quis risus pellentesque ultricies sed in mi. Nam et mauris eros. Quisque in rhoncus justo, ac mattis nulla. Sed eget nibh nibh. Aenean nisl sapien, congue a purus posuere, pretium egestas sapien. Pellentesque tempus orci ut placerat luctus. Sed tincidunt, urna vel ornare fermentum, ligula mauris pulvinar tortor, ac convallis libero nibh convallis tortor.
</p>

<p>
Donec eget odio elit. Praesent viverra nisi magna, quis rhoncus enim pellentesque sit amet. Pellentesque sodales blandit mauris ac laoreet. Morbi pharetra pellentesque ex eu sodales. Morbi id tempus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec tincidunt ex. Duis commodo nibh vel tincidunt aliquam. Etiam vel risus sed sem placerat auctor. Nulla porta sapien lorem, et molestie massa interdum ac.
</p>
<div class='toolbar'>
  <button id='up'>Up</button><button id='down'>down</button>
</div>

</body>

javascript 在悬停滚动页面上（否 jQuery）

javascript on hover scroll page ( No jQuery )

javascript

scroll

hover