css automatisches nach unten scrollen einer section?
Hallo Community,
ich benötige mal wieder eure Hilfe. Im Standard Messenger von Buddypress werden die Konversationen und damit der weg zur neuesten Nachricht und zum Eingabefeld immer länger werden, dem habe ich entgegengewirkt indem ich via css die höhe begrenzt und einen y-overflow gesetzt habe. Nun besteht allerdings das Problem das die neueste Nachricht unten, der Scrollbalken aber Standardmäßig oben ist, also immer noch extremes scrollen.
Gibts da nicht eine Option das ich nur diesen Bereich sage das er automatisch nach unten soll bis der Nutzer ggf hoch scrollt, ohne das davon alle scrollbalken betroffen wären?
2 Antworten
Es scheint keine Möglichkeit zu geben, das ohne Javascript zu realisreren.
Möglicherweise können vordefinierte Tastenkombinationen des Browsers verwendet werden.
Mit Javascript lässt sich die Position recht leicht setzen, indem das "scrollTop" oder das "scrollLeft" Attribute verändert werden.
Woher ich das weiß:Recherche
Destranix
12.03.2020, 14:39
@beda83
Ok.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
height: 40px;
width: 200px;
overflow-y: scroll;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){init();});
function init(){
document.getElementById("scrollable").scrollTop = document.getElementById("anchorTest").offsetTop;
}
</script>
</head>
<body>
<h1>The overflow-y Property</h1>
<p>The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.</p>
<h2>overflow-y: scroll:</h2>
<div class="ex1" id="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.<span id="anchorTest"/></div>
</body>
</html>
Das Script oben scrollt das Element der ID "scrollable" an die Position des Elements mit der ID "anchorTest", sobald die HTML-Datei vollständig geladen wurde.
Das Script kannst du dir so einfach kopieren und auf deiner Seite einfügen.
Die IDs musst du entsprechend anpassen.
@Destranix
super, werde ich später mal ausprobieren. dank dir schon mal
Nutzer, der sehr aktiv auf gutefrage ist
Hier ein CSS Hack dafür. Mit einem Input das ein autofocus kriegt. Kannst das input natürlich noch besser verstecken...
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS autoscroll hack</title>
</head>
<body>
<header>
<h1>CSS autoscroll hack</h1>
</header>
<section id="scrolling">
<header>
<h3>Example 1:</h3>
</header>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae neque sem. Pellentesque arcu leo, maximus non lorem id, interdum commodo dui. Cras euismod ligula sit amet finibus aliquet. Ut at metus sem. Ut viverra faucibus augue, ut suscipit tellus finibus in. In et nisl maximus, hendrerit dui at, tempus risus. Sed vel leo sodales, maximus sapien sed, blandit nisi. Etiam fringilla odio a nisl luctus tempus ac sit amet metus. Ut sagittis ex risus, ut scelerisque nisi dapibus eu.
Nunc sodales pharetra dolor, vitae pharetra dui. Praesent a pharetra nibh, vel pulvinar justo. Maecenas sagittis nisl et volutpat feugiat. Nulla porttitor, felis nec pharetra fermentum, ante purus iaculis lorem, eu laoreet lacus lorem at lectus. Nulla rutrum a quam nec vulputate. Ut maximus efficitur purus, ut dictum orci. Duis vel finibus magna. Pellentesque fermentum, dui at dapibus pulvinar, sapien ipsum imperdiet neque, at iaculis dolor ligula et nibh. Sed nunc felis, sagittis et justo sit amet, gravida condimentum dui. Pellentesque massa enim, imperdiet ac scelerisque sit amet, elementum sed velit. Phasellus placerat velit quis eros elementum aliquam. Ut pellentesque sem ut malesuada pretium.
Quisque molestie sapien in nibh pharetra, in rhoncus neque consequat. In quis lobortis ante. In eget laoreet ipsum. Mauris maximus risus leo, ut maximus felis condimentum at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque nibh justo, laoreet sed eleifend imperdiet, porta vel quam. Vivamus mattis, erat sed porttitor volutpat, dolor neque rhoncus lorem, sit amet tincidunt mauris est non orci. Nam sollicitudin tincidunt ex id aliquet. Fusce nec mollis turpis. Nunc id urna ac diam faucibus finibus eget porta nulla. Donec vulputate dictum sem, quis mollis sapien semper quis.
Sed venenatis magna in eros tempus convallis. Proin mattis ac tortor id faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at vestibulum magna. Aenean at sapien a neque dignissim condimentum. Mauris interdum cursus justo ac scelerisque. Curabitur id aliquet mauris. In a ante mattis, ultricies orci id, tristique leo. Cras eleifend ultrices metus, ut consequat massa blandit at. Nunc vitae molestie sem. Nam placerat, erat sit amet pulvinar dapibus, felis turpis accumsan tellus, nec viverra ante libero at sem. Nullam massa arcu, interdum id finibus in, auctor non mauris.
Nulla in dolor sem. Proin porttitor augue eu nisi imperdiet finibus. Pellentesque eleifend neque eget risus semper, vel vehicula ipsum vulputate. Morbi pharetra congue felis, efficitur tristique est imperdiet non. Suspendisse volutpat, nisl eget sodales luctus, magna ex ornare urna, ut facilisis ipsum magna id orci. Nulla facilisi. In eleifend finibus dolor, eu tempus orci semper ut. Donec aliquam pulvinar tellus sit amet finibus. Proin vestibulum convallis felis ut blandit. Maecenas sodales dignissim leo, placerat commodo turpis placerat non. Sed at ante a erat placerat dignissim a sed eros.
Maecenas non tortor tellus. Aenean rutrum molestie purus at bibendum. Phasellus facilisis feugiat mattis. Maecenas aliquam eros tortor, at porta eros finibus ac. Proin auctor vitae neque quis posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse nec facilisis lacus. Duis aliquet dolor a neque tincidunt, eu ornare quam sagittis. Donec auctor mi et enim blandit, at tristique nunc faucibus. Nulla rhoncus sapien ac volutpat elementum. In tincidunt libero orci.
Sed pellentesque diam nec bibendum imperdiet. Nunc at ex convallis, consequat mauris vel, semper dolor. Integer condimentum pharetra dolor nec dictum. Fusce gravida sapien bibendum dui sollicitudin tempus. Pellentesque volutpat tincidunt faucibus. Nam viverra ornare diam a mattis. Sed quis erat odio. Nulla blandit, felis quis tempus maximus, neque nisi consectetur neque, sit amet blandit arcu libero id lorem. Suspendisse potenti. Nulla tincidunt mi nisl, ut porttitor ipsum luctus eu. Nulla facilisi.
Suspendisse potenti. Mauris ut augue eu lectus lobortis eleifend quis nec ante. Vivamus placerat enim sed massa dapibus, a aliquam nunc aliquam. Suspendisse aliquam purus vel nibh cursus tempus. Fusce a interdum nibh. Praesent gravida fringilla purus sit amet tincidunt. Aenean metus elit, imperdiet eu auctor vel, blandit non massa. Proin ut dictum nisl. In non velit ac massa fringilla congue at ac est. Maecenas consequat ex augue, sed imperdiet ex bibendum et. Morbi sagittis orci sed ex lobortis pellentesque. Etiam sit amet nisl et massa malesuada rhoncus. Etiam et gravida elit, nec sodales enim.
Pellentesque suscipit lectus a consectetur placerat. In dapibus facilisis neque vitae hendrerit. Fusce pellentesque diam ac quam interdum semper. In hac habitasse platea dictumst. Etiam vitae massa eget tortor sodales aliquam et ac diam. Ut cursus sapien neque, sed maximus purus congue sit amet. Aenean vel finibus dui, at suscipit justo. Integer pretium bibendum lectus, quis tincidunt est congue ac. Nulla et enim accumsan, dapibus quam sed, bibendum lectus. Donec et libero arcu.
Vestibulum fermentum vulputate velit, vitae consectetur neque sollicitudin eu. Etiam euismod, felis ut rhoncus finibus, ante enim tristique nunc, nec euismod velit mauris eu justo. Mauris faucibus magna ut augue malesuada consectetur. Maecenas posuere interdum ipsum vitae blandit. Cras eros tellus, suscipit sed velit ut, rutrum placerat metus. Vestibulum viverra nec dolor sed ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at molestie metus, vitae faucibus odio. Fusce eu nibh sed nulla varius efficitur. Sed et est ligula. Phasellus eu massa eget velit tempor pulvinar a a nisl. Aenean nulla tortor, commodo malesuada auctor quis, posuere in erat. Praesent id ipsum et purus posuere vestibulum et et dui. Donec eleifend leo in arcu rutrum accumsan.
Fusce non mollis arcu, at eleifend justo. Curabitur vel neque tempus, congue quam sit amet, sagittis neque. Nullam imperdiet tempus volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque eros non sem molestie, sit amet elementum orci posuere. Praesent id posuere justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc et augue eget erat rutrum sollicitudin. Aliquam congue massa eget est aliquam, et blandit tortor aliquet. Proin rutrum dictum felis id tincidunt. Pellentesque sodales posuere mi laoreet pretium. Quisque libero enim, semper at nibh sit amet, vulputate scelerisque nisi. Morbi quis erat lorem. Nunc quis condimentum lorem. Sed placerat non elit ut fermentum. Mauris feugiat porta hendrerit. Nunc vel nibh tempus purus rhoncus consequat quis et enim. Nulla ac massa eget diam finibus convallis et quis quam. Curabitur bibendum aliquam velit, vitae hendrerit dui luctus ornare. Mauris imperdiet vitae sapien a ornare. Duis sit amet est nulla. In tristique consequat turpis sit amet mattis.
Aliquam vestibulum tortor ante, id dapibus mi imperdiet sit amet. Integer vitae sapien eget justo dignissim dapibus. Vivamus ac lorem a sem dignissim scelerisque nec eu ante. Aliquam turpis est, consequat in diam non, convallis fermentum tortor. Donec accumsan quis lorem sit amet scelerisque. Nunc feugiat justo in nisi auctor, nec volutpat ante viverra. Morbi consectetur pulvinar ullamcorper. In in metus leo. Vestibulum tincidunt finibus justo dignissim egestas. Suspendisse sollicitudin ultricies ante eget ultrices. Aliquam at eros ligula. Sed malesuada suscipit scelerisque. Sed suscipit, sapien in interdum faucibus, felis enim tempor diam, quis tristique magna nibh a tortor. Vestibulum in porttitor ex. Cras consequat a felis volutpat sagittis.
Phasellus commodo porttitor consequat. Nullam accumsan dolor vel tristique pharetra. Cras euismod dolor urna, vitae scelerisque ligula consectetur id. Sed hendrerit laoreet varius. Integer pharetra quis elit eu ultrices. Nullam quis est faucibus, euismod felis nec, tincidunt augue. Nulla laoreet lectus mattis purus iaculis, consectetur mattis nulla viverra. Nunc tempor erat velit, et semper lectus sagittis sit amet. Fusce quis egestas lacus. Phasellus pulvinar vitae ex id egestas. Nam a massa nec mi gravida venenatis sed nec augue. Pellentesque scelerisque magna quis ex aliquet tristique. Aenean quis bibendum diam, vulputate faucibus elit. Morbi ullamcorper dui lacus, vitae viverra mauris semper eget.
Nunc quis sapien ut sem sollicitudin tempus non sed nulla. Maecenas tempus fringilla lacus, eu tempus lacus varius in. Ut non commodo est. Phasellus ac nunc nec ante mattis molestie. Mauris iaculis mollis nisi. In hac habitasse platea dictumst. Aliquam luctus tempor magna nec maximus.
<input type="text" id="scrollhack" autofocus />
</div>
</section>
<footer>
<p>made by ee</p>
</footer>
<style>
* {
box-sizing: border-box;
}
body {
margin: 12px;
padding: 0px;
font-family: Open-Sans, OpenSans, "Open Sans", sans-serif;
}
#scrolling {
height: 300px;
overflow-x: auto;
}
#scrollhack {
width: 1px;
height: 1px;
}
</style>
</body>
</html>
Hallo Destranix, erst einmal danke für deine Antwort. Ich muss gestehen das ich das mit meinen Kenntnisstand wohl schwer umsetzen kann. Du kennst da nicht zufällig eine Anleitung?