2011-11-03 3 views
0

J'ai un div avec une barre de défilement qui affiche 15 mois avec 3 min de chaque ligne, Lorsque la page se charge, je veux fixer la barre de défilement à la 2e rangée comme indiqué dans ma capture d'écran.Comme dans la barre de défilement devrait être fixé à la position indiquée dans ma capture d'écran, par opposition au haut de la div.La raison de cette exigence est que nous affichons les 3 mois précédents, mais l'utilisateur devrait voir le mois en cours lorsque la page se charge. J'espère avoir clairement enter image description hereFixer la position de la barre de défilement verticale à la 2ème ligne dans div (cshtml)?

J'utilise

<div id="key_dates" style ="overflow:scroll;width:960px;height:500px"> 

Pouvez-vous les gars s'il vous plaît aider?

Merci, Adarsh ​​

Répondre

1

Vous devez utiliser JavaScript pour cela:

<!-- 
    Place this script before closing </body> tag so that 
    DOM (HTML elements tree) is already built when the script is running 
--> 
<script> 
// create a closure to not pollute global scope 
!function() { 
    // cache reference to keyDates element 
    var keyDates = document.getElementById('key_dates'); 
    // set scroll to the height of one row 
    keyDates.scrollTop = 150; // substitute `150` with height of one row 
}(); 
<script> 

Here est la documentation de element.scrollTop

Si vous utilisez jQuery, vous le faites comme ça (et here sont les docs);

<script> 
$('#key_dates').scrollTop(150); 
</script> 

Un exemple avec jQuery: http://jsfiddle.net/gryzzly/CjdwX/

+0

Ajustement basé sur la hauteur semble plus approprié pour moi, car je n'ai pas vraiment le contrôle sur les lignes. Mais quand j'ai ajouté ce morceau de code dans jquery $ ('# key_dates'). ScrollTop (150); la position de la barre de défilement n'a pas l'air de changer du tout. Quelque chose que j'ai pu manquer ici? – KeenUser

+0

semble fonctionner pour moi: http://jsfiddle.net/gryzzly/CjdwX/ –

+0

notez que nous changeons 'scrollTop' du parent, le conteneur, l'élément qui a' overflow: scroll 'appliqué –

1

Il semble que je ne peux pas démontrer correctement avec jsFiddle, mais here is a sample of code qui fonctionne si vous le tester dans un navigateur. En utilisant des ancres sur chaque ligne, nous pouvons ancrer la fenêtre à un emplacement spécifié en utilisant href ou l'URL. Par exemple, si vous avez implémenté ce code à www.address.tld/calendar, pour afficher la ligne deux, entrez www.address.tld/calendar#row2.

Vous pouvez utiliser uniquement une ancre sur la ligne deux, et vous pouvez le placer statiquement ou par programme en fonction de vos besoins. C'est une solution assez simple, mais certaines personnes n'aiment pas que le hash et le nom de l'ancre soient dans l'url. Cela ne me dérange pas.

+1

Vous pouvez le démontrer comme ceci: http://fiddle.jshell.net/PfLS3/2/show/light/#row2 –

+0

@gryzzly Parfait! Merci pour le pointeur. Aussi, bonne réponse ci-dessus. –

Questions connexes