[英]How can I get rid of the “Are you sure you want to leave this page” message?
[英]HTML Scrolling Issue (I want to get rid of the buttons, horizontal option, and leave the snapping on)
我想要一个很酷的滚动效果来锁定页面上的每个 div id,但我不知道该怎么做。 这是它的样子https://test.iamnotregis.repl.co/ -_-
我删除了 css 因为它不是必需的,但我仍然会在 repl.it 上链接项目https://repl.it/@IAmNotRegis/test#index.ZFC35FDC70D5FC69D269883A822C7A
<!DOCTYPE html>
<html>
<body>
<!-- Load user defined styles -->
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="script.js"></script>
<div id="carousel" class="snap">
<div id="carousel-1">Item 1<br>Start scrolling ...</div>
<div id="carousel-2">Item 2</div>
<div id="carousel-3">Item 3</div>
</div>
<div id="controls">
<button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
<button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
</div>
</body>
</html>
function toggleSnap() {
var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
}
function toggleDirection() {
var isVertical = document.getElementById('carousel').classList.toggle('vertical');
document.getElementById('otherScrollState').innerText = isVertical
}
#carousel {
/* Ensure that the contents flow horizontally */
overflow-x: auto;
white-space: nowrap;
display: flex;
}
#carousel.vertical {
flex-direction: column;
}
/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}
#carousel.snap > div {
scroll-snap-align: center;
}
#carousel.snap.vertical {
flex-direction: column;
scroll-snap-type: y mandatory;
}
/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
}
#carousel.snap.vertical {
scroll-snap-points-x: initial;
-ms-scroll-snap-points-x: initial;
scroll-snap-points-y: repeat(100%);
-ms-scroll-snap-points-y: repeat(100%);
}
从 index.html 中删除“控件”div
<!DOCTYPE html>
<html>
<body>
<!-- Load user defined styles -->
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<div id="carousel" class="snap">
<div id="carousel-1">Item 1<br>Start scrolling ...</div>
<div id="carousel-2">Item 2</div>
<div id="carousel-3">Item 3</div>
</div>
</body>
</html>
您不再需要的 javascript 函数 toggleSnap() 和 toggleDirection() 也可以删除。
但是 styles.css 文件是强制性的。 CSS styles 确保快速启动。
#carousel {
/* Ensure that the contents flow horizontally */
overflow-x: auto;
white-space: nowrap;
display: flex;
}
#carousel.vertical {
flex-direction: column;
}
/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}
#carousel.snap > div {
scroll-snap-align: center;
}
#carousel.snap.vertical {
flex-direction: column;
scroll-snap-type: y mandatory;
}
/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
}
#carousel.snap.vertical {
scroll-snap-points-x: initial;
-ms-scroll-snap-points-x: initial;
scroll-snap-points-y: repeat(100%);
-ms-scroll-snap-points-y: repeat(100%);
}
/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#carousel {
position: relative;
width: 100%;
height: 100%;
}
#carousel > div {
min-width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
font-size: 20px;
}
#carousel-1 {
background-color: #e34747;
}
#carousel-2 {
background-color: #5ab92c;
}
#carousel-3 {
background-color: #226de2;
}
#controls {
position: fixed;
bottom: 10px;
left: 10px;
}
#controls button {
padding: 5px 10px;
}
如果您希望它垂直滚动,请将 class“垂直”名称添加到“轮播”div 中。
<div id="carousel" class="snap vertical">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.