如何让我的社交媒体栏在鼠标滚轮滚动的同时放大和缩小？
How can I make my social media bar zoom in and out at the same time my mouse wheel scroll does?
大家好，我刚开始学习 HTML 和 CSS 从头开始制作我自己的页面，所以对于这个帖子，我只需要社交媒体栏方面的一些帮助，基本上我需要的是只是为了让栏能够随着用户的鼠标滚轮滚动而放大和缩小，这意味着我不会有这样的情况：
它应该看起来像这样（在绘画上编辑）：
这是代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community Impact</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="community-impactstyle.css" rel="stylesheet">
</head>
<body>
<div class="s">
<a href="index.html">Return to Index<i class="fas fa-hand-point-left"></i></a>
</div>
<h3>Noah Verner</h3>
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>Made by NOAH VERNER</footer>
</body>
</html>
css:
@font-face{
src: url(Fonts/InputSerifCondensed-Regular.ttf);
font-family: InputSerif;
}
*{
font-family: InputSerif ;
}
body{
background-color: #F5DC00;
margin: 0;
padding: 0;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h3 {
position: fixed;
top: -20px ;
left: 0;
right: 0;
font-size: 12px;
background-color: black;
color: white;
font-size: 20px;
text-align: center;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
font-weight: bold;
text-align: center;
}
/*Barra de iconos de redes sociales*/
.s{
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
flex-direction: column;
transform: translate(-1070px,0px);
}
.s a{
color: #F5DC00;
background: rgba(0, 0, 0, 1);
font-size: 20px;
font-weight: 600;
text-decoration: none;
display: block;
margin: 5px;
padding: 20px;
width: 300px;
text-align: right;
border-radius: 50px;
transition: 1s;
transition-property: transform;
}
.s a:hover{
transform: translate(200px, 0);
}
.s i{
margin-left: 10px;
font-size: 30px;
width: 30px;
height: 30px;
}
.s a:nth-child(1) i{
color: #F5DC00;
}
我知道上面的代码不包含所有 5 个按钮，但我想解决方案可以应用于“s”class，而不是单独应用于每个按钮，我倾向于认为解决方案将应用于 css 文件，但我是一个菜鸟 atm，无法弄清楚
有什么想法吗？
您的问题是您正在使用 transform 属性 将您的元素移出框架。一种更可靠的方法是使用 left 属性.
虽然我们可能可以在 CSS 中找到一种方法来做到这一点，但更准确的方法是使用 JavaScript 的触摸 - 像这样：
//get all of our social tabs as an array
let socialElem = document.querySelectorAll('.social');
//loop through the array
socialElem.forEach((elem) => {
//define our text element within the tab
let text = elem.querySelector('.hidden');
//get it's dimensions as a JavaScript object
let textSize = text.getBoundingClientRect();
/* now, using the dimensions object above, we can return the 'right' pixel value
of our text element. If we scoot our tab in by the negative of that number it should
perfectly hide our text without using transform.*/
elem.style.left = -textSize.right + 'px';
//we also add 'px' so that CSS can read it
})
:root {
/* set an accent color variable to make my life easier */
--col-acc: #F5DC00;
}
body {
/* reset default body styles */
margin: 0;
height: 100vh;
/* set the background color of the body to the accent color variable */
background-color: var(--col-acc);
/* set the font to something more appealing */
font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}
.social {
/* set the background color of the social tab to black */
background-color: black;
/* set the text color to our accent color variable */
color: var(--col-acc);
/* resize the tab to be the size of it's content */
width: max-content;
/* round the right side */
border-radius: 0 32px 32px 0;
/* fix the tab (absolute would also work here if you don't care about it staying put when scrolling up and down on the page) */
position: fixed;
/* center it vertically (could be applied to a parent/containter for multiple tabs) */
top: 50%;
/* set it to the left side of the screen */
left: 0;
/* center it just a little more vertically */
transform: translateY(-50%);
/* set the transition to the left property with a durration of 0.5 seconds */
transition: left 0.5s;
}
.social a {
/* give the anchor tag a display of block so we can resize it */
display: block;
/* override the color with our accent color*/
color: var(--col-acc);
/* remove the underline */
text-decoration: none;
/* beef up the font a little */
font-weight: 500;
/* make the font bigger */
font-size: 2rem;
/* add some padding to our tab */
padding: 8px 24px;
}
.social:hover, .social:focus-within {
/* on hover (or focus for accesability) set the left position to 0
I set this property to "important" becase the JavaScript is setting the right value to 0
in the elment styles (which normally overrides the stylesheet), so the important here
re-overrides the elment style, if that makes sense*/
left: 0 !important;
}
<div class="social">
<a href="#">
<span class="hidden">Social</span>
</a>
</div>
你可以做一个滚动效果，你把 scrollY 和元素的 boundingClientRect 位置相加 left 然后在条件语句中为以像素为单位的单位长度添加一些约束。跟踪 up 和 down 滚动方向并添加它们社交图标和包含文本的进出幻灯片的条件。
const socials = document.querySelectorAll('.socials')
let lastScroll = 0;
window.addEventListener('scroll', function(e) {
let value = window.scrollY
let output = ''
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0 && lastScroll <= currentScroll) {
lastScroll = currentScroll
output = "down"
} else {
lastScroll = currentScroll
output = "up"
}
socials.forEach(icon => {
let rect = icon.getBoundingClientRect()
rect.left < -16 && output === "down" ?
icon.style.left = `${rect.left + value * 0.15}px` :
rect.left > -16 && output === "down" ?
icon.style.left = `0px` :
rect.left > "-192" && output === "up" ?
icon.style.left = `${rect.left - value * 0.15}px` :
rect.left < "-192" && output === "up" ?
icon.style.left = `-192px` : null
})
})
body * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#container {
height: 300vh;
position: relative;
}
img {
width: 2rem;
height: 2rem;
}
.socials {
display: flex;
justify-content: space-between;
align-items: center;
width: 15rem;
height: auto;
background: green;
color: limegreen;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
padding: .5rem;
position: fixed;
top: 2rem;
left: -12rem;
}
<div id="container">
<div class="socials">
Follow me on Rumble
<img src="https://img.utdstc.com/icon/01c/903/01c9032ef30ddf7a9f0346ce3a77b92fd5602e34818f25603962012d2792fab6:200">
</div>
</div>
大家，我刚刚找到了另一个解决我的问题的方法，更简单易行（感谢@calvin-bonner 让我意识到了这一点）：
在我的 CSS 文件中：我刚刚输入了这个：
.s{
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
left: 0;
flex-direction: column;
transform: translate(-82.5%);
}
如您所见，我只添加了left: 0;并将transform: translate(-1070px,0px);更改为transform: translate(-82.5%);，现在效果很好，正如我预期的那样
（应用我上面的简单解决方案后我的索引的实际屏幕截图）
Note: I think this solution works well because I'm not using nor
planning to add a scroll bar on my website
大家好，我刚开始学习 HTML 和 CSS 从头开始制作我自己的页面，所以对于这个帖子，我只需要社交媒体栏方面的一些帮助，基本上我需要的是只是为了让栏能够随着用户的鼠标滚轮滚动而放大和缩小，这意味着我不会有这样的情况：
它应该看起来像这样（在绘画上编辑）：
这是代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community Impact</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="community-impactstyle.css" rel="stylesheet">
</head>
<body>
<div class="s">
<a href="index.html">Return to Index<i class="fas fa-hand-point-left"></i></a>
</div>
<h3>Noah Verner</h3>
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>Made by NOAH VERNER</footer>
</body>
</html>
css:
@font-face{
src: url(Fonts/InputSerifCondensed-Regular.ttf);
font-family: InputSerif;
}
*{
font-family: InputSerif ;
}
body{
background-color: #F5DC00;
margin: 0;
padding: 0;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h3 {
position: fixed;
top: -20px ;
left: 0;
right: 0;
font-size: 12px;
background-color: black;
color: white;
font-size: 20px;
text-align: center;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
font-weight: bold;
text-align: center;
}
/*Barra de iconos de redes sociales*/
.s{
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
flex-direction: column;
transform: translate(-1070px,0px);
}
.s a{
color: #F5DC00;
background: rgba(0, 0, 0, 1);
font-size: 20px;
font-weight: 600;
text-decoration: none;
display: block;
margin: 5px;
padding: 20px;
width: 300px;
text-align: right;
border-radius: 50px;
transition: 1s;
transition-property: transform;
}
.s a:hover{
transform: translate(200px, 0);
}
.s i{
margin-left: 10px;
font-size: 30px;
width: 30px;
height: 30px;
}
.s a:nth-child(1) i{
color: #F5DC00;
}
我知道上面的代码不包含所有 5 个按钮，但我想解决方案可以应用于“s”class，而不是单独应用于每个按钮，我倾向于认为解决方案将应用于 css 文件，但我是一个菜鸟 atm，无法弄清楚
有什么想法吗？
您的问题是您正在使用 transform 属性 将您的元素移出框架。一种更可靠的方法是使用 left 属性.
虽然我们可能可以在 CSS 中找到一种方法来做到这一点，但更准确的方法是使用 JavaScript 的触摸 - 像这样：
//get all of our social tabs as an array
let socialElem = document.querySelectorAll('.social');
//loop through the array
socialElem.forEach((elem) => {
//define our text element within the tab
let text = elem.querySelector('.hidden');
//get it's dimensions as a JavaScript object
let textSize = text.getBoundingClientRect();
/* now, using the dimensions object above, we can return the 'right' pixel value
of our text element. If we scoot our tab in by the negative of that number it should
perfectly hide our text without using transform.*/
elem.style.left = -textSize.right + 'px';
//we also add 'px' so that CSS can read it
})
:root {
/* set an accent color variable to make my life easier */
--col-acc: #F5DC00;
}
body {
/* reset default body styles */
margin: 0;
height: 100vh;
/* set the background color of the body to the accent color variable */
background-color: var(--col-acc);
/* set the font to something more appealing */
font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}
.social {
/* set the background color of the social tab to black */
background-color: black;
/* set the text color to our accent color variable */
color: var(--col-acc);
/* resize the tab to be the size of it's content */
width: max-content;
/* round the right side */
border-radius: 0 32px 32px 0;
/* fix the tab (absolute would also work here if you don't care about it staying put when scrolling up and down on the page) */
position: fixed;
/* center it vertically (could be applied to a parent/containter for multiple tabs) */
top: 50%;
/* set it to the left side of the screen */
left: 0;
/* center it just a little more vertically */
transform: translateY(-50%);
/* set the transition to the left property with a durration of 0.5 seconds */
transition: left 0.5s;
}
.social a {
/* give the anchor tag a display of block so we can resize it */
display: block;
/* override the color with our accent color*/
color: var(--col-acc);
/* remove the underline */
text-decoration: none;
/* beef up the font a little */
font-weight: 500;
/* make the font bigger */
font-size: 2rem;
/* add some padding to our tab */
padding: 8px 24px;
}
.social:hover, .social:focus-within {
/* on hover (or focus for accesability) set the left position to 0
I set this property to "important" becase the JavaScript is setting the right value to 0
in the elment styles (which normally overrides the stylesheet), so the important here
re-overrides the elment style, if that makes sense*/
left: 0 !important;
}
<div class="social">
<a href="#">
<span class="hidden">Social</span>
</a>
</div>
你可以做一个滚动效果，你把 scrollY 和元素的 boundingClientRect 位置相加 left 然后在条件语句中为以像素为单位的单位长度添加一些约束。跟踪 up 和 down 滚动方向并添加它们社交图标和包含文本的进出幻灯片的条件。
const socials = document.querySelectorAll('.socials')
let lastScroll = 0;
window.addEventListener('scroll', function(e) {
let value = window.scrollY
let output = ''
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0 && lastScroll <= currentScroll) {
lastScroll = currentScroll
output = "down"
} else {
lastScroll = currentScroll
output = "up"
}
socials.forEach(icon => {
let rect = icon.getBoundingClientRect()
rect.left < -16 && output === "down" ?
icon.style.left = `${rect.left + value * 0.15}px` :
rect.left > -16 && output === "down" ?
icon.style.left = `0px` :
rect.left > "-192" && output === "up" ?
icon.style.left = `${rect.left - value * 0.15}px` :
rect.left < "-192" && output === "up" ?
icon.style.left = `-192px` : null
})
})
body * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#container {
height: 300vh;
position: relative;
}
img {
width: 2rem;
height: 2rem;
}
.socials {
display: flex;
justify-content: space-between;
align-items: center;
width: 15rem;
height: auto;
background: green;
color: limegreen;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
padding: .5rem;
position: fixed;
top: 2rem;
left: -12rem;
}
<div id="container">
<div class="socials">
Follow me on Rumble
<img src="https://img.utdstc.com/icon/01c/903/01c9032ef30ddf7a9f0346ce3a77b92fd5602e34818f25603962012d2792fab6:200">
</div>
</div>
大家，我刚刚找到了另一个解决我的问题的方法，更简单易行（感谢@calvin-bonner 让我意识到了这一点）：
在我的 CSS 文件中：我刚刚输入了这个：
.s{
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
left: 0;
flex-direction: column;
transform: translate(-82.5%);
}
如您所见，我只添加了left: 0;并将transform: translate(-1070px,0px);更改为transform: translate(-82.5%);，现在效果很好，正如我预期的那样
（应用我上面的简单解决方案后我的索引的实际屏幕截图）
Note: I think this solution works well because I'm not using nor planning to add a scroll bar on my website