I have a div that has overflow: scroll, and I want it to always scroll to bottom along Y-axis no matter what content it has. (think about a chat thread, which always displays the latest message at the bottom.)
I saw there are some jQuery solutions that scrolls the div to its height when new messages get added, but I am wondering if there's any pure CSS solution to this?
Thank you!
Unfortunately, not possible with pure CSS but you can use pure js to get the total scrollable height of element with elem.scrollHeight and scroll the element to that position with elem.scrollTop
you can see in this example
the js code is:
var elem = document.querySelector("theElementClass");
var elemHeight = elem.scrollHeight;
elem.scrollTop = elemHeight;
hope this helps. =D
Related
I have two fixed elements with a background image that I want to have scroll with the page, without the element scrolling. Here's the jsfiddle: http://jsfiddle.net/3s3qu2yv/
Is there a way to accomplish this in pure CSS? I know there is a way to do this is javascript but I'd like to avoid that if possible.
Not sure what you are asking here. It looks like you have already accomplished this in your fiddle.
Otherwise background as a background-attachment attribute that makes it scroll along with an element.
This is commonly used in parralax sites.
There is not a way to do this with just CSS, you will need JavaScript. THIS jQuery to be exact:
http://jsfiddle.net/3s3qu2yv/4/ -- updated to better illustrate the effect I'm going for.
function scr() {
var scrolled = $(window).scrollTop();
$('.fx').css('background-position', 'center -' + scrolled + 'px');
}
$( document ).ready(function() {
$(window).scroll(function(){
scr();
});
});
A fixed element's background cannot scroll with the page, regardless if the background-attachment is set to fixed or scroll because the element itself does not move.
I'm trying to recreate something similar to the following:
https://www.apple.com/uk/ipad-mini/design/
When you scroll down on the page it seems to understand that a certain area, when viewed, triggers an animated element. I'm trying to base next steps on this but unsure what to start in. I understand elements of HTML, CSS, DIV Tags and potentially switching on a hidden block when viewed might be the answer. But need advice of the simple trigger element. Java? PHP? CSS?
So when the user scrolls down maybe 30% a hidden element appears or animates. I would animate in adobe edge if that helps.
Any good?
Try to do it with Jquery (scrolltop)
$(window).scroll( function(){
if ($(window).scrollTop() > 150) {
// If window is scrolled by 150px do this
}
});
Hope this helps
I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.
How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)
A cross platform solution is needed
The div has a scrollTop property that you can set (and its pal, scrollLeft).
jsFiddle Demo
scrollTop on MDN
scrollLeft on MDN
there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here
As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:
$(function() {
$('#scroll').scrollTop(100);
});
Add a div (where you want to scroll):
<div id="#scroll-here">Test..</div>
and add a link like this:
Scroll to Test
if you want a smooth scroll you can check this
You have to target taht div and set scrollLeft. scrollTop property.
const scrollingDivElement = document.getElementsByClassName("class_name");
if(scrollingDivElement && scrollingDivElement.length > 0){
//this is the div element that scrolls
scrollingDivElement[0].scrollLeft += 50;
}
I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)
So I can't get the footer on this page: http://hiddenhillsweddings.com/ to extend to the bottom of the browser window. I've tried all of the different positional attributes (absolute, relative, etc..) and I've tried all kinds of different combinations with minimum and maximum height at 100% and other values. I have read many threads on this forum about this topic but haven't found a solution. I'm pretty sure what I need is a position: absolute; and a height of 100% but for some reason when I do this the footer extends way past the bottom of the browser and I can't hide the overflow to get rid of the scroll bar. Someone please help me.
You have just found one of web developers' most usual problems... There are many solutions to this, some pure CSS, other with JavaScript. There are some good tutorials on this subject already written:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
I personally do it via jQuery, I find it to be more reliable. I place the footer below everything, with display:block and normal position. Then I check if the content is smaller than the page, in which case I change the position to absolute and bottom:0;
Once that is done, I check on window resize in case the scenario changes. It's probably not optimal, but it works great:
function footer(){
var offset = $('#footer').offset();
var footerHeight = $('#footer').height();
var height = window.innerHeight;
if(height-offset.top-footerHeight>0)
$('#footer').css({'position':'absolute', 'bottom':0, 'width':'100%'});
else
$('#footer').css({'position':'static'});
}
Just make sure you change #footer for the ID of your footer element.
I read some question before but could not find out the answer solved this problem at all. I have to area one of this contain an iframe and other display player to play music. I'm using margin auto and It's work fine but not for scroll bar vertical.
I am trying to always display scroll bar but in some case the content short enough to not display scroll bar.
I'm trying javascript solution:
var w = window.innerWidth;
if(!w){
w = document.documentElement.offsetWidth; // for IE
}
var outsize = parseInt(Math.round((w-1000)/2));
$("#body-content").css({'margin':'0 '+outsize+'px'});
$("#player",parent.document).css({'margin':'0 '+outsize+'px'});
get the width of the window and re-margin the content and the player. But at the first time It's slightly move few pixels. It's look very ugly.
Anyone here have the difference solution for this, pls help me!
does the following added to your css file help?
body {
overflow-y: scroll;
}
it should always display the scrollbar, greyed out if the content is smaller than the screen and active when the page gets higher.