I have written code for horizontal image slider using ion-scroll. It is working properly. But I want my page should be scrollable vertically also.
I can't scroll the whole page by swiping on the contents inside the <ion-scroll> (marked area in image). But I can scroll the page by swiping outside that marked area. If I change the direction="xy" then I can scroll inside the <ion-scroll> contents only.
<ion-content>
<ion-scroll zooming="false" direction="x" style="width: 100%;">
<div style="width: {{albumDetail.sliderWidth}}; repeat">
<span ng-repeat="list in albumDetail.lists">
<a href="#/app/browse/albums/{{albumDetail.type}}/{{list.id}}"><button id="album-card" class="button button-light">
<img width="140px" height="140px" src="{{list.albumArt}}"/>
<p id="album-name-card">{{list.albumName}}</p>
</button></a>
</span>
</div>
</ion-scroll>
</ion-content>
So this has been a long standing issue, there is a way to get it to work but it is a lot of code: i am going to post it here and give the link to a codepen
HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js">
</script>
</head>
<body ng-controller="MyCtrl">
<ion-nav-view>
<ion-view title="Check In Portugal by aptece">
<ion-content class="padding" delegate-handle="mainScroll">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainScroll">
<p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
</ion-scroll>
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
<p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
</ion-scroll>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<img src="http://imgs.xkcd.com/comics/cloud.png" style="border: 0px; width:744px; height:233px; vertical-align: bottom;">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
</ion-content>
</ion-view>
</ion-nav-view>
</body>
</html>
CSS:
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
ion-scroll {
width: 100%;
font-size: 40px;
height: auto;
white-space: nowrap;
padding: 10px;
line-height: 40px;
}
JS:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal2').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
});
// Scroll fix directive
(function() {
var HorizontalScrollFix = (function() {
function HorizontalScrollFix($timeout, $ionicScrollDelegate) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var mainScrollID = attrs.horizontalScrollFix,
scrollID = attrs.delegateHandle;
var getEventTouches = function(e) {
return e.touches && (e.touches.length ? e.touches : [
{
pageX: e.pageX,
pageY: e.pageY
}
]);
};
var fixHorizontalAndVerticalScroll = function() {
var mainScroll, scroll;
mainScroll = $ionicScrollDelegate.$getByHandle(mainScrollID).getScrollView();
scroll = $ionicScrollDelegate.$getByHandle(scrollID).getScrollView();
// patch touchstart
scroll.__container.removeEventListener('touchstart', scroll.touchStart);
scroll.touchStart = function(e) {
var startY;
scroll.startCoordinates = ionic.tap.pointerCoord(e);
if (ionic.tap.ignoreScrollStart(e)) {
return;
}
scroll.__isDown = true;
if (ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT') {
scroll.__hasStarted = false;
return;
}
scroll.__isSelectable = true;
scroll.__enableScrollY = true;
scroll.__hasStarted = true;
scroll.doTouchStart(getEventTouches(e), e.timeStamp);
startY = mainScroll.__scrollTop;
// below is our changes to this method
// e.preventDefault();
// lock main scroll if scrolling horizontal
$timeout((function() {
var animate, yMovement;
yMovement = startY - mainScroll.__scrollTop;
if (scroll.__isDragging && yMovement < 2.0 && yMovement > -2.0) {
mainScroll.__isTracking = false;
mainScroll.doTouchEnd();
animate = false;
return mainScroll.scrollTo(0, startY, animate);
} else {
return scroll.doTouchEnd();
}
}), 100);
};
scroll.__container.addEventListener('touchstart', scroll.touchStart);
};
$timeout(function() { fixHorizontalAndVerticalScroll(); });
}
};
}
return HorizontalScrollFix;
})();
angular.module('ionicApp').directive('horizontalScrollFix', ['$timeout', '$ionicScrollDelegate', HorizontalScrollFix]);
}).call(this);
Related
The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.
Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)
The code
Here is a simple HTML document to demonstrate my current method of auto scrolling.
let scrollTimeout;
function pageScroll() {
scrollTimeout = setTimeout(() => {
window.scrollBy(0, 1);
pageScroll();
}, 10);
}
function startScroll() {
pageScroll();
}
function stopScroll() {
clearTimeout(scrollTimeout);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Auto-scroll</title>
</head>
<body>
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
ducimus, totam debitis sint modi inventore explicabo iusto
assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
sequi rerum quibusdam nisi provident! Autem aliquid
reprehenderit doloremque inventore quasi dolore fugit tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
molestias consectetur molestiae labore totam ex et eum nulla
officia, minima excepturi voluptates, consequatur amet modi!
Molestiae autem illum ullam accusantium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
</main>
</body>
</html>
Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.
With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.
Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.
The below example could help you with requestAnimationFrame.
let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;
function animateScroll(timestamp) {
const deltaTime = timestamp - prevtimeStamp;
prevtimeStamp = timestamp;
const scrollY = window.scrollY;
if(counter > functionTiming){
window.scrollBy(0, 1);
counter = 0;
if(scrollY === window.scrollY)
reachedBottom = true;
}else{
counter += deltaTime;
}
if(reachedBottom)
cancelAnimationFrame(scrollAnimationFrame);
else
scrollAnimationFrame = requestAnimationFrame(animateScroll);
}
function startScroll() {
if(!scrollAnimationFrame)
animateScroll(0);
}
function stopScroll() {
if(scrollAnimationFrame)
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = 0;
}
document.getElementById('functionTimingControl').addEventListener('change', function(e){
functionTiming = e.target.value;
});
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
<input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
</main>
I have the following code:
document.addEventListener('scroll', (event) => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
let topValue = scrollY*0.5;
e.style.top = `${topValue}px`;
});
When i try to scroll, the background shakes up and dow like crazy. I've looked on the internet and it seems like it it hasn't got the answer. I think it can have something to do that it goes really slow to do the calculations, am I on the right path, and in that case, how do I solve it?
Javascript is not a correct way of doing this. You should use CSS instead:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
If you want your .bg-top background element to not scroll with the window, you should use the css property position: fixed instead.
Run the Code Snippet below to see how it works:
html, body {margin: 0; padding: 0; width: 100%; height: 100%;}
.bg-img{
background: url("//picsum.photos/200/100");height: 100px;width: 100%;
position:fixed;
top:0;
}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>
But if you HAVE TO use JavaScript for whatever reason, you can change the position property value on scroll and assign the top property to 0.
Run the Code Snippet below to see how it works:
document.addEventListener('scroll', () => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
e.style.position = "fixed";
e.style.top = "0";
});
html, body {padding: 0; width: 100%; margin: 0px 0px 0px 0px; height: 100%;}
.bg-img{background:url("//picsum.photos/200/100");height: 100px; width: 100%;}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>
i want to scroll webpage from top navigation bar which is having buttons, to a section of same webpage which is having multiple tab and i want each button assigned to each tab.
how can i do this.
currently trying using e.g.
<a href="#tabA">
<div id="tabA">
but above code is not taking to desired path.
i want it like e.g.
<a href="#tabA">
<section="one">
<div id="tabA">
</section>
</div>
Try:
<div name="tabA">
I don't believe the anchor will look for id unless you are using a JS/JQ library you didn't mention.
What you have above should work natively by the browser unless something else is preventing it (like a library or something).
Here's an example:
.text {
width: 200px;
}
go to section A
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia!</p>
<section>
<h1 id="tabA">Section A!</h1>
</section>
You can achieve the same results programmatically by locating the top position of the element and telling the window to scroll to that position:
const rect = document.querySelector('#tabA').getBoundingClientRect().top;
window.scroll(0, rect.top);
where window.scroll takes two arguments (x, y).
A more recent approach but not widely supported by all browsers is the Element#scrollIntoView API.
document.querySelector('#tabA').scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
I am trying to fade out the each blocks while scrolling top. When the particular div reached browser top it should slowly fade away.
I have tried but the problem here is that it is fading out all the divs since all divs have the same class name. I do not want to change the html structure for some reasons.
Is there any way to apply this effect on each divs?
var header = $('.content');
var range = 200;
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var offset = header.offset().top;
var height = header.outerHeight();
offset = offset + height / 2;
var calc = 1 - (scrollTop - offset + range) / range;
header.css({ 'opacity': calc });
if ( calc > '1' ) {
header.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
header.css({ 'opacity': 0 });
}
});
DEMO
I updated your fiddle. Basically, I did the calculation for each div separately by wrapping your code with .each
Check out this different version of answer fiddle.
header.each(function(){
if($(this).position().top - scrollTop <= 0){
$(this).css({ 'opacity': 0 });
}else{
$(this).css({ 'opacity': 1 });
}
You have to calculate the opacity for each element of the class.
Also you have to add a parent element with overflow-y:auto;
var parent = $("#parent");
var childs = $(".content");
var offset_top = 0;
var range = 200;
parent.on('scroll', function () {
var scrollTop = $(this).scrollTop();
if(scrollTop<20){
childs.css("opacity",1);
}
else{
childs.each(function(){
var top = $(this).offset().top - offset_top;
var height = $(this).height();
var offset = height/4;
var opacity = (top+ height - offset) / range;
if(opacity>1) opacity = 1;
else if(opacity<0) opacity = 0;
$(this).css("opacity",opacity);
});
}
});
div {color:#fff; padding:5%}
.content:nth-child(1){background:blue}
.content:nth-child(2){background:grey}
.content:nth-child(3){background:black}
.content:nth-child(4){background:red}
body,html{
height:100%;
}
#parent{
height:50%;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
</div>
I have the following code to make divs collapse but I've realised that when I have a background colour there is a gap between the bar and content. Can anyone figure out how I can remove that gap?
https://jsfiddle.net/upxL42rw/1/
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>
You are seeing the effects of collapsing margins between your p elements and the adjacent h3 headers.
You can prevent this by simply adding the following CSS rule:
.collapse div {
overflow: auto;
}
See demo: https://jsfiddle.net/vauxjg7r/
Fiddle demo here.
Try to add this CSS style:
.collapse p {
margin: 0px;
}
But if you want to keep the space above, you can do:
.collapse p {
margin: 0px;
padding: 10px 0 0;
}
The issue was caused by browser-applied styles, you need to overwrite them with codes like above. Or, you could use CSS resets to normalize browser styles.
It's the margin from the paragraphs. You must overwrite the user agent stylesheet by adding this to your stylesheet:
p {
margin: 0;
padding: .5em 0;
}
This is due to margin collapsing on the p elements.
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block with the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
with the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)
To stop this effect from happening add overflow: hidden; to .collapse > h3 + div.
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>