英文:
scroll on mouse movement
问题
我在HTML中有一个div，并已添加了overflow: scroll。我希望它根据鼠标移动来滚动。如果鼠标在屏幕左侧，滚动应该在开始位置。如果鼠标位于屏幕中央，滚动应该位于中央，同样适用于右侧。
请查看这个网站。您应该看到一个顶部缩略图导航栏，它根据鼠标移动而滚动。我想要完全相同的效果。我已经建立了它，但它的表现不如预期。如果我的鼠标在屏幕中央，滚动条不在中央，而在右侧。查看。以下是我的代码：
<div id="gallery">
<div id="thumbnail-wrapper">
<div class="thumbnail"></div>
<!-- ... 这里省略了一些缩略图元素 ... -->
</div>
<div id="active-image" class="overflow-scroll">
<img src="https://www.lifewire.com/thmb/_cH2YBd-iyPP1cqqj2WWXiCWudg=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/hdwallpapersnet-free-wallpaper-5919d3ca3df78cf5fa49bda3.jpg" alt="something went wrong" class="original">
</div>
</div>
你可能认为我没有正确计算scrollX，我尝试了许多组合，但无法获得我期望的行为。
英文:
I have a div in my html and i have added overflow: scroll. I want it to scroll according to mouse movement. If the mouse is on left side of screen the scroll should be at the start. If the mouse is on the center of the screen the scroll should be in the center and same goes for right.
Have a look at this website. You should see a top navigation bar of thumbnails which scrolls according to your mouse movements. I want the same effect exactly same. I have built it but it's not working as expected. If my mouse is in the center of screen the scrollbar is not the center but at the right side. have a look. Below is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const gallery = document.getElementById('gallery');
const activeImage = document.getElementById('active-image');
const thumbnail = document.querySelector('.thumbnail');
const thumbnailWrapper = document.getElementById('thumbnail-wrapper');
thumbnailWrapper.addEventListener('mouseenter', handleMouseMove);
thumbnailWrapper.addEventListener('mousemove', handleMouseMove);
function handleMouseMove(e) {
const noOfPics = Array.from(thumbnailWrapper.childNodes).length
const clientX = e.clientX;
const clientY = e.clientY;
const width = window.innerWidth;
const height = window.innerHeight;
const wrapperWidth = thumbnail.clientWidth * noOfPics;
const wrapperHeight = thumbnailWrapper.clientHeight;
const percentX = clientX / width * 100;
const percentY = clientY / height * 100;
const scrollX = (wrapperWidth - width) * percentX / 100 - width / 2;
thumbnailWrapper.scroll(scrollX, 0)
}
<!-- language: lang-css -->
* {
box-sizing: border-box;
padding: 0%;
margin: 0%;
}
#gallery {
width: 100vw;
height: 100vh;
background-color: #303030;
display: flex;
flex-direction: column;
}
#thumbnail-wrapper {
display: flex;
/* justify-content: center; */
overflow-x: scroll;
padding: 0.5rem 1rem;
}
#thumbnail-wrapper::-webkit-scrollbar {
/* display: none; */
background-color: #000;
}
::-webkit-scrollbar-thumb {
background: red;
}
.thumbnail {
flex: none;
width: 150px;
height: 100px;
border: 3px solid #303030;
background-color: #202020;
border-radius: 10px;
}
#active-image {
flex: 1;
position: relative;
margin: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.fit {
height: 100%;
margin: 0 auto;
}
.original {
height: auto;
position: absolute;
top: 0%;
}
<!-- language: lang-html -->
<div id="gallery">
<div id="thumbnail-wrapper">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
<div id="active-image" class="overflow-scroll">
<img src="https://www.lifewire.com/thmb/_cH2YBd-iyPP1cqqj2WWXiCWudg=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/hdwallpapersnet-free-wallpaper-5919d3ca3df78cf5fa49bda3.jpg" alt="something went wrong" class="original">
</div>
</div>
<!-- end snippet -->
It think i am not calculation scrollX correctly i have tried many combination but can't get the behaviour i expected
答案1
得分: 2
以下是翻译好的部分：
"So basically it's a linear thing, starting from (0, 0) to the (clientWidth, maxScroll). So I calculate the linear formula then it's easy to put in a clientX and get an offsetX."
"基本上这是一个线性的事情，从(0, 0)开始，到(clientWidth, maxScroll)结束。所以我计算线性公式，然后很容易将clientX放入并获得偏移量。"
"It might need some tweaking across the edges. Probably calculate the equation from 0+imageWidth to maxWidth-imageWidth. Have a play with it."
也许需要在边缘进行一些微调。可能需要计算从0+imageWidth到maxWidth-imageWidth的方程。试着玩一下吧。
"Update: I had a play with it. Now should be perfect."
更新：我已经试过了。现在应该是完美的。
其余部分是代码和样式，无需翻译。
英文:
So basically it's a linear thing, starting from (0, 0) to the (clientWidth, maxScroll). So I calculate the linear formula then it's easy to put in a clientX and get an offsetX.
It might need some tweaking across the edges. Probably calculate the equation from 0+imageWidth to maxWidth-imageWidth.
Have a play with it.
Update: I had a play with it. Now should be perfect.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getLinearFunction(x1, y1, x2, y2) {
var slope = (y2 - y1) / (x2 - x1);
return function(x) {
return slope * (x - x1) + y1;
}
}
const gallery = document.getElementById('gallery');
const thumbnail = document.querySelector('.thumbnail');
const thumbnailWrapper = document.getElementById('thumbnail-wrapper');
thumbnailWrapper.addEventListener('mousemove', handleMouseMove);
// document.addEventListener('key')
function handleMouseMove(e) {
const noOfPics = Array.from(thumbnailWrapper.childNodes).length
const clientX = e.clientX;
const clientY = e.clientY;
const width = thumbnailWrapper.clientWidth;
const height = thumbnailWrapper.clientHeight;
const wrapperWidth = thumbnail.clientWidth * noOfPics;
const wrapperHeight = thumbnailWrapper.clientHeight;
const percentX = clientX / width * 100;
const percentY = clientY / height * 100;
const scrollLeft = thumbnailWrapper.scrollLeft
var maxScrollLeft = thumbnailWrapper.scrollWidth - thumbnailWrapper.clientWidth;
// when clientX = 0 you want scrollx = 0
// when clientx = width you want scrollX = maxScrollLeft
var foo = getLinearFunction(0, 0, width, maxScrollLeft);
// EDIT: improvement:
var foo = getLinearFunction(0 + 150, 0, width - 150, maxScrollLeft);
output.innerHTML = JSON.stringify({
clientX,
clientY,
width,
height,
wrapperWidth,
wrapperHeight,
scrollLeft,
maxScrollLeft
}, null, 4)
thumbnailWrapper.scroll(foo(clientX), 0)
}
<!-- language: lang-css -->
* {
box-sizing: border-box;
padding: 0%;
margin: 0%;
}
#gallery {
width: 100vw;
background-color: #303030;
display: flex;
flex-direction: column;
}
#thumbnail-wrapper {
display: flex;
/* justify-content: center; */
overflow-x: scroll;
padding: 0.5rem 1rem;
background: yellow;
}
#thumbnail-wrapper::-webkit-scrollbar {
/* display: none; */
background-color: #000;
}
::-webkit-scrollbar-thumb {
background: red;
}
.thumbnail {
flex: none;
width: 150px;
height: 100px;
border: 3px solid #303030;
background-color: #202020;
border-radius: 10px;
}
#active-image {
flex: 1;
position: relative;
margin: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.fit {
height: 100%;
margin: 0 auto;
}
.original {
height: auto;
position: absolute;
top: 0%;
}
<!-- language: lang-html -->
<div id="gallery">
<div id="thumbnail-wrapper">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
</div>
<pre id="output"></pre>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论