0

I am creating a simple website with two sections on the page. On left side I will have links and on right side the content in scrollable way. On click of link the content on right will scroll to the specific content related to the link smoothly.

Below is the code and also jsfiddle where I have the sample code but the scrolling isn't smooth. Please check.

Index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50/50 Scrollable and Non-Scrollable</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="left-side">         
            <div class="left-content">
                <div class="left-inner">
                    <h1>First Last</h1>
                    <p>An easy way to get to know me</p>
                </div>
            </div>
            <nav>
                <ul>
                    <li><a href="#intro">About</a></li>
                    <li><a href="#work">Experience</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#achievements">Achievements</a></li>
                    <li><a href="#academics">Academics</a></li>
                    <li><a href="#socialwork">Social Work</a></li>
                    <li><a href="#hobbies">Hobbies</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class="right-side">
            <div class="right-content">
                <div class="right-inner">
                    <h1>Scrollable Content</h1>
                </div>
            </div>            
            <div class="scrollable-content">
                <p>This side is scrollable.</p>
                <div id="intro">
                    <h2 class="major">About Me</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="work">
                    <h2 class="major">Experience</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="projects">
                    <h2 class="major">Projects</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="achievements">
                    <h2 class="major">Achievements</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="academics">
                    <h2 class="major">Academics</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="socialwork">
                    <h2 class="major">Social Work</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="hobbies">
                    <h2 class="major">Hobbies</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id="contact">
                    <h2 class="major">Contact</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Styles.css

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

.container {
  display: flex;
  height: 100dvh; 
}

.left-side, .right-side {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

.left-side {
  background-color: #f0f0f0;
  overflow: hidden;
}

.right-side {
  background-color: #e0e0e0;
}

.right-side h1 { 
  height: 3rem;
  margin: 1rem;
}

.scrollable-content {
  height: calc(100% - 4rem);
  overflow-y: scroll;
  padding-right: 20px;  
  box-sizing: border-box;
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

.scrollable-content::-webkit-scrollbar {
  display: none;  /* Hide scrollbar in Chrome, Safari, and Opera */
}
Improve this question
2
  • This question is similar to: How to Animate Scroll to Top JavaScript. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
    – ControlAltDel
    Commented Jul 7 at 17:15
  • It is different as I am not using any JS and not trying to scroll to the top. One of the answers worked for me which I marked. Thank you for your response
    – Prashil Shah
    Commented Jul 8 at 14:48

2 Answers 2

Reset to default
2

your scroll-behavior : smooth; is at a wrong place
move it to .scrollable-content { in your CSS

body, html {
  margin             : 0;
  padding            : 0;
  font-family        : Arial, sans-serif;
  }
.container {
  display            : flex;
  height             : 100dvh; 
  }
.left-side  , 
.right-side {
  width              : 50%;
  padding            : 20px;
  box-sizing         : border-box;
  }
.left-side {
  background-color   : #f0f0f0;
  overflow           : hidden;
  }
.right-side {
  background-color   : #e0e0e0;
  }
.right-side h1 { 
  height             : 3rem;
  margin             : 1rem;
  }
.scrollable-content {
  height             : calc(100% - 4rem);
  overflow-y         : scroll;
  padding-right      : 20px;  
  box-sizing         : border-box;
  -ms-overflow-style : none;  
  scrollbar-width    : none;
  scroll-behavior    : smooth;     /* here */
  }
.scrollable-content::-webkit-scrollbar {
  display            : none;  /* Hide scrollbar in Chrome, Safari, and Opera */
  }
<div class="container">
  <div class="left-side">
    <div class="left-content">
      <div class="left-inner">
        <h1>First Last</h1>
        <p>An easy way to get to know me</p>
      </div>
    </div>
    <nav>
      <ul>
        <li><a href="#intro">About</a></li>
        <li><a href="#work">Experience</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#achievements">Achievements</a></li>
        <li><a href="#academics">Academics</a></li>
        <li><a href="#socialwork">Social Work</a></li>
        <li><a href="#hobbies">Hobbies</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="right-side">
    <div class="right-content">
      <div class="right-inner">
        <h1>Scrollable Content</h1>
      </div>
    </div>
    <div class="scrollable-content">
      <p>This side is scrollable.</p>
      <div id="intro">
        <h2 class="major">About Me</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="work">
        <h2 class="major">Experience</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="projects">
        <h2 class="major">Projects</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="achievements">
        <h2 class="major">Achievements</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="academics">
        <h2 class="major">Academics</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="socialwork">
        <h2 class="major">Social Work</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="hobbies">
        <h2 class="major">Hobbies</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id="contact">
        <h2 class="major">Contact</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</div>

Improve this answer
0
0

change your css atrribute like this And also add .section and section:target

.container {
display: flex;
height: 100vh;}

.scrollable-content {
height: calc(100% - 4rem);
overflow-y: scroll;
padding-right: 20px;
box-sizing: border-box;
-ms-overflow-style: none;
scrollbar-width: none;}

.section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s, transform 0.6s;}

.section:target {
    opacity: 1;
    transform: translateY(0);}
Improve this answer
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 7 at 20:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.