mirror of
https://github.com/snailyp/gemini-balance.git
synced 2026-09-05 23:56:37 +08:00
Refactor keys_status.html for improved layout and scrolling behavior
- Removed duplicated padding and simplified CSS for `body`, ensuring proper spacing with 20px padding. - Adjusted `.container` styles: - Removed custom scrollbar styles and overflow-related attributes. - Centered the element with `margin: 20px auto`. - Updated scroll behavior: - Changed scroll functions to operate on `window` instead of `.container`. - Modified event listeners to use `window` for detecting scroll events. - Cleaned up redundant or unused styles and improved readability.
This commit is contained in:
@@ -11,14 +11,9 @@
|
|||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 20px;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
@@ -28,14 +23,8 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
scrollbar-width: none; /* Firefox */
|
margin: 20px auto;
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
|
||||||
}
|
|
||||||
.container::-webkit-scrollbar {
|
|
||||||
display: none; /* Chrome, Safari, Opera */
|
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
@@ -381,31 +370,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function scrollToTop() {
|
function scrollToTop() {
|
||||||
const container = document.querySelector('.container');
|
window.scrollTo({
|
||||||
container.scrollTo({
|
|
||||||
top: 0,
|
top: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollToBottom() {
|
function scrollToBottom() {
|
||||||
const container = document.querySelector('.container');
|
window.scrollTo({
|
||||||
container.scrollTo({
|
top: document.documentElement.scrollHeight,
|
||||||
top: container.scrollHeight,
|
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听滚动事件来显示/隐藏滚动按钮
|
// 监听窗口滚动事件来显示/隐藏滚动按钮
|
||||||
document.querySelector('.container').addEventListener('scroll', function() {
|
window.addEventListener('scroll', function() {
|
||||||
const scrollButtons = document.querySelector('.scroll-buttons');
|
const scrollButtons = document.querySelector('.scroll-buttons');
|
||||||
if (this.scrollTop > 100) {
|
if (window.scrollY > 100) {
|
||||||
scrollButtons.style.display = 'flex';
|
scrollButtons.style.display = 'flex';
|
||||||
} else {
|
} else {
|
||||||
scrollButtons.style.display = 'none';
|
scrollButtons.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user